Vue2.0 + VueRouter2.0 + webpack + Vue-cli => 开发环境搭建

使用 Vue2.0-cli 脚手架（属于Vue全家桶）快速构建项目

【1】首先需要先安装好 node.js；

【2】安装 webpack 输入指令 $ npm install -g webpack

【3】安装 $ npm install -g vue-cli 　　//全局安装Vue-cli

【4】$ Vue init webpack projectName 　　//生成项目名为projectName 的新工程

【5】$ cd projectName 　　//进入工程目录

【6】$ npm install 　　//初始化依赖安装

【7】$ npm install less style-loader css-loader url-loader babel-loader sass-loader less-loader file-loader --save-dev 　　//安装相关加载器用于对应编译

【8】执行 $ npm run dev 打开浏览器 http://localhost:8080 就可以看到欢迎页面了

【9】 执行 $ npm run build 是打包工程，最终上线代码在dist目录下；

【10】基本目录结构：主要关注 index.html 入口，src 开发区，dist 发布区，static 静态资源

/*【bulid】编译发布文件的各种配置文件；

 *【config】配置目录，包括端口号等；

 *【dist】最终发布的代码存放位置，发布区；

 *【doc】项目文档，可在这里编写开发文档；

 *【node_modules】npm加载的项目依赖模块；

 *【src】这里是我们要开发的目录，基本上要做的事情在这个目录里面，开发区；

 *【static】静态资源目录 如图片、字体等；

 *【test】初始测试目录，不重要；

 *【package.json】项目配置文件；

 *【index.html】索引文件，入口文件；

 *【README.md】项目的说明文档，markdown格式，不重要；

 */

 

【11】如果出现 index.html 里引用的 css 和 js 的引用路径不对，这时候就需要自己修改一下配置，进入 config / index.js

原来的配置的引用路径为：

 我自己更改为：

这样就能正常访问了 done!

 

转载于:https://www.cnblogs.com/viphchok/articles/7299230.html