vue+webpack构建项目过程

项目环境搭建：

1.安装node.js  // 基于node-v4.4.5-x86版本

2.基于node.js,利用淘宝npm镜像安装相关依赖

在cmd里直接输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回车，等待安装...

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...

            2).输入：vue，回车，若出现vue信息说明表示成功

4.创建一个基于 "webpack" 模板的新项目

Vue init webpack project-name(默认安装2.0版本)

Vue init webpack#1.0 project-name(安装1.0版本)

脚手架工具如下：



-build中配置了webpack的基本配置、开发环境配置、生产环境配置等

 

-config中配置了路径端口值等

 

-node_modules为依赖的模块

 

-src放置组件和入口文件

 

-static放置静态资源文件

 

-index.html文件入口

webpack中的一些解释

new HtmlWebpackPlugin 这个插件的作用是把output输出的文件自动插入到html里

 

1.cd project-name

2.Npm install

3.Npm run dev

4.在浏览器输入localhost:8080 效果如下：



因为使用了stylus语法，安装完stylus-loader后依然报错，是因为npm 3+ 会报错，所以还需手动安装stylus。

问题一：安装stylus-loader遇到的问题：

 


解决方法：npm i sytlus --save --dev





 

成功解决！