Vue-cli构建spa应用

 2.1 VUE-cli构建spa应用

• npm install -g vue-cli

• Vue init webpack-simple demo

• vue init webpack demo2

若是在项目目录里能够用npm i vue -g -S来安装，而后若是用script标签引用的话就是script src ="node_modules/vue/dist/vue.js"来引用vue

Vue-cli 脚手架安装

cnpm i -g vue-cli

安装完了能够在项目目录里执行shell脚本

vue init webpack-simple demo

按照要求输入适当的回答而后就会在目录里建立一个demo文件夹，里面就能够有项目了。

要运行项目就要用shell脚本进入项目目录里，运行npm run dev。可是运行不起来是要报错的。缘由是由于没有安装相应的依赖。

因此须要执行cnpm i，等装完了就好了,运行npm run dev就能够跑起来了。

3.vue配置介绍

按照上面的套路新建一个ImoocMall的项目

> vue init webpack imoocmall
//一堆配置，eslint NO
//E2E NO
>cnpm i
​

而后就新建好了一个项目

 

•  

   

  • 这个是打包好的配置的文件夹

 

•  

  • config是上面的webpack的配置

 

•  

  • src是开发项目的源码

 

•  

  • App.vue是一个入口组件，main.js是项目入口。另外vue结尾的都是一个vue组件

   

•  

  • static放的是静态资源

 

•  

  • 这个是ES6解析的一个配置。

•  

  • 编译器的一个配置

•  

  • 忽略git上传文件的配置

•  

  • html添加前缀的一个配置

•  

  • 单页面的入口

•  

  • 项目的基本配置，npm i 是照着这个装的

•  

•  

  • 这两个能够合成一个，可是SPA想作一个清晰地架构，因此把他们拆开了。这两个是配置的核心部分

•  

  • Build.js是用来构建生产用的包，就是整个bundle.js和一个index.html

•  

  • chalk是一个shell语法高亮的插件

  • Semver是一个版本检查工具，若是有依赖须要Node版本比较高，如今版本不够时候他会提醒

• 通常该文件的时候都是直接改index.js的配置。再就是改webpack.base的文件

•  

   

  • 对于这种直接引用到目录的require，通常都是指目录底下的index.js文件。若是没有index.js会报错的。

•  

   

  • 用在成产的配置，有各类插件，其中有个HTMLWEBPACKPLUGIN插件是将打包的东西自动放到index.html失中的插件