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 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。

如果 Vue 选项中包含渲染函数，该模板将被忽略。

# render

• 类型：(createElement: () => VNode) => VNode

• 详细：

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

4. 参考链接

Vue.js中文文档
Vue CLI中文文档