vue-cli中安装方法

<p class="p0">运行vue查看安装是否成功

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/5fe3f9f7e603ef90988dd24f556a6e87.png" alt="">

<p class="p0">4、运行vue?init?webpack(注：模板名称)?sell2(注：项目名称)

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/a12a4cc897471f425160aff8728af148.png" alt="">

<p class="p0">5、进入项目文件夹下执行?cnpm?install????来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/1fd160c660c2f9d81fb50612ae52797e.png" alt="">

<p class="p0">6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存，所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/dcaa53b7b8bb8b1da50ebace342b56ed.png" alt="">

<p class="p0">注：webstorm一打开就卡死了，没办法操作文件夹这种情况的解决方法为，首先在文件夹形式下打开删除node-modules文件夹，然后进行阻止检索的方法，然后在重新cnpm?install就好*（这种方法需要安装完依赖项先运行一次然后删除nodemodules子文件，webstorm打开项目，禁止检索node?module文件夹，然后在删除该文件夹，重新安装即可）

<p class="p0">?

<p class="p0">7、运行项目执行?npm?run?dev??(注：此时不能用cnpm来运行，必须是npm)

<p class="p0">8、将需要的资源放进项目

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/d23c7080c83a30773721b1e312311371.png" alt="">

<p class="p0">9、我们需要用到路由功能??所以需要安装vue-router

<p class="p0">安装方法：vnpm?install?vuve-router?--save

<p class="p0">10、在build/devs-erver.js下编写自定义变量和路由功能

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/52c87c621f9513928938ebde33af5dfa.png" alt="">

<p class="p0">这样在运行项目下就可以得到自己想要的json数据，如下：

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/9f6a7c524ae0dfe388d653115fc8f1c3.png" alt="">

<p class="p0">?

<p class="p0">这样路由就配置成功，并且得到了自己想要的数据

<p class="p0">11、在写代码之前现在html文件下引入初始化样式（保持样式的统一和美观）

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/f968d295a802d55b517c1a61540a06d9.png" alt="">

<p class="p0">12、调用组件的方式

<p class="p0">?

<img src="https://www.52php.cn/res/2019/02-27/20/518bd42b4eafe0ffe421fc9f61936271.png" alt="">

<p class="p0">

<img src="https://www.52php.cn/res/2019/02-27/20/0858a0c1167a4d804bcd0e27efda2cd2.png" alt="">

<p class="p0">13、需要用到sass（个人需求），所以安装sass-loader

<p class="p0">安装方法：cnpm?install?sass-loader?--save-dev

<p class="p0">Pakcage.json文件下回生成sass-loader的版本信息

<p class="p0">由于sass-loader是依赖于node-sass所以我们还要安装node-sass

<p class="p0">安装方法：cnpm?install?node-sass?--save-dev

<p class="p0">

<img src="https://www.52php.cn/res/2019/02-27/20/e2f913fa7d350f12a2f7f1285f2ed741.png" alt="">

<p class="p0">此时可以在模块中定义scss来书写scss代码，还可以新建*.scss文件,并且可以利用

<p class="p0">@import??“../路径”;?来调用其他的scss文件和已经定义好的scss方法,

<p class="p0">利用@include?方法名（参数）;?来调用

<p class="p0">

<img src="https://www.52php.cn/res/2019/02-27/20/42d5c7cd088d9023ba439ecde80c5947.png" alt="">

<p class="p0">

<img src="https://www.52php.cn/res/2019/02-27/20/c40a50b970eeeac365718bb5c61e639c.png" alt="">

<p class="p0">14、需要用到ajax请求,利用vue-resource

<p class="p0">安装方法：cnpm?install?vue-resource--save?安装完成会在package.json中生成版本信息

<p class="p0">使用方法如下：

<p class="p0">

<img src="https://www.52php.cn/res/2019/02-27/20/dfeb5f7f429bb73b4374f39abd277843.png" alt="">