## 安装@vue/cli ``` npm install -g @vue/cli # 或 yarn global add @vue/cli # 完成后检查版本 vue --version # 创建一个名为hello-world的目录 vue create hello-world #根据需要完成相应配置 # 进入目录 cd hello-world # 开启webpack-dev-serve yarn serve ``` ## 完整版和非完整版的区别 1. 特点：完整版有compiler编译器，可以直接将html转移成Dom节点，在js中调用DOM节点对html内容直接进行操作非完整版没有compiler编译器 compiler占40%的体积 2. 视图：vue完整版写在HTML里或者写在template选项里，而Vue非完整版则需要写在render函数里，用h来创建标签，h是vue创作者尤雨溪写给render的 3. cdn引入：在使用完整版时，引入在bootcnd官网搜索vue引入vue.js文件，如果使用vue非完整版，则同样的方法在HTML中引入vue.runtime.js 文件，如果文件是在生产环境则引入vue.runtime.js 4. webpack引入：完整版需要配置alias、配置比较复杂，默认使用非完整版 5. @vue/cli引入：完整版需要配置，默认使用非完整版 ### 比如实现n+1的功能 ### 对于完整版在HTML中添加 ```

``` 在main.js中设置 ``` new Vue({ el: "#app", //渲染到页面的位置 data: { n: 0, }, methods: { add() { this.n += 1; }, }, }); ``` 即可实现从main.js 文件中对html操作 #### 对于非完整版 ``` 在HTML重引入vue.runtime.min.js文件

``` 创建一个Demo.vue vue文件分成三部分：template（视图部分），script（数据，方法），sytle（样式）三部分 ``` > ``` main.js中引入Demo.vue 文件，并用render函数渲染 ``` import Demo from "./Demo.vue"; //打印出来的这一部分就是把demo.vue中的template中的html容翻译成new Vue认识的语言 console.log(Demo.render.toString()); new Vue({ el: "#app", //渲染到页面的位置 render(h) { return h(Demo); }, }) ``` ## Vue实例 Vue实例就如同jQuery实例，封装了DOM的所有操作，封装了data的所有操作。然后就可以操作DOM了，就像监听事件，改变DOM，操作data，对data进行增删改查。 Vue实例没有封装ajax，需要使用axios的ajax功能。 ## template 和render的区别如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版： ``` // 需要编译器 new Vue({ template: '

' }) ``` ``` // 不需要编译器 new Vue({ render (h) { return h('div', this.hi) } }) ``` 当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可 ## 使用codesandbox.io写Vue的代码：注意：不要登录！不要登录！登录了限制次数。进入[官网](https://codesandbox.io/s/gallant-goldberg-zc14o?file=/src/main.js:149-195)，点击右上角的Create Sandbox，选择vue，进入界面，即可在线编辑实时预览。 ## 如何将项目下载到本地：点击左上角的File，选择Export to ZIP，再到本地目录里解压缩即可。内容主要来源于饥人谷前端课程

vue完整版和非完整版的区别和使用方法