Vue初探

215 阅读2分钟

1. Vue的安装

1. 首先我们点击进入Vue的中文版官网

image.png

2. 点击起步,查看安装教程

3. 作为开发人员,建议使用Vue官方提供的命令行工具CLI进行安装。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

4. 安装完成后,使用如下命令来检查其版本是否正确。

vue --version

image

5. 使用以下命令来创建一个新的Vue项目。

vue create vue-demo-1

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

image

6. 当看到以下提示时,证明项目已经创建好了(我们可以到文件管理器中查看生成的项目文件,或用IDE打开进行项目开发)。此时我们照提示输入命令。

image

image

7. 成功启动服务后,会得到两个网址,Ctrl+单击网址,便会预览到当前项目的网页。

image

image
此时,我们就成功的创建了一个Vue项目,并可以实时预览,接下来我们就可以和Vue愉快的玩耍了~

8. 除了使用本地的IDE进行Vue项目开发以外,我们还可以使用一个线上的开发环境CodeSandbox来进行Vue项目的开发,右侧可以实时预览,非常地方便。

tips:不要注册创建账号,就没有项目个数上限的限制了。

image

该网站可以下载编写好的项目代码到本地,十分地方便。

image

2. 完整版和非完整版的区别

image
对于开发者来说,建议使用非完整版,然后配合vue-loader和vue文件。

3. template和render

# template

  • 类型:string

  • 详细:

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerHTML 作为模板。常用的技巧是用