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!

 

posted @ 2017-08-07 15:09  JorsonWong  阅读(206)  评论(0编辑  收藏  举报