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失中的插件