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 模板编译渲染函数。
网友评论