vue-cli搭建vue项目（单页面应用）

1.全局安装vue-cli

2.建立项目：

vue init webpack test

test是项目名称，会在当前工做目录下新建一个test文件夹

接下来会手动选择一些配置

除了Setup unit tests with Karma + Moch?和Setup e2e tests with Nightwatch两个测试选项选择no，其余都选择默认便可

3.执行init完毕后，会自动生成项目，安装vue项目必要和常见的loader，插件等

4.项目目录结构：

• build 文件夹：用于存放 webpack 相关配置和脚本（默认状况下，webpack使用根目录下的webpack.config.js，可是其实能够使用任何目录下的任意名字的js配置文件，取决于package.json），package.json有这样的配置：

　　"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

　　"build": "node build/build.js"----build.js引用了webpack.prod.conf.js

　　webpack.prod.conf.js和webpack.dev.conf.js都引用了webpack.base.conf.js，在webpack.base.conf.js配置的在prod和dev

　　中都有效

 

• config文件夹:用于配置一些webpack须要用到的参数，好比webpack配置文件夹中的输出目录：

　

　　output: {

　　　　path: config.build.assetsRoot,

　　      ......

　　}

　　assetsRoot在config下配置文件能够找到对应的值：

      assetsRoot: path.resolve(__dirname, '../dist'),

      输出目录配置在config上一层（工程根目录）下的dist文件夹下

 

• src文件夹

　　这个文件夹是整个项目最主要以及使用频率最高的文件夹。

　　“assets”: 共用的样式、图片

　　“components”: 业务代码存放的地方，里面分红一个个组件存放，一个页面是一个组件，一个页面里面还会包着不少组件

　　“router”: 设置路由

　　“App.vue”: vue文件入口界面

　　“main.js：对应App.vue 建立vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

也能够在里面增长新建目录和文件

•  static目录：

　　静态资源目录，放在这个目录下的文件不通过loader直接能够使用，好比在static下新建img目录存放图片

      使用的时候（没进过loader，当前路径是项目根目录）：

　　<img src="/static/img/logo2.png">

      src/assets下面也能够存放图片，使用loader加载，引用的时候以当前vue文件为基准目录，好比在app.vue中：

　　<img src="./assets/bg_student.png">

     若是这两个图片文件都加载了，会在dist/static/img下放入这两张图片（assets下的图片大于limit限制才会放入，不然　　

     base64写入文件）