vue-cli + webpack 构建vue.js开发环境

前言

vue-cli是vue的脚手架工具；

使用webpack进行模块化开发和打包。

一、安装

用node.js内置的npm安装vue-cli和webpack

1.安装vue-cli

npm install vue-cli -g

2.安装webpack

npm install webpack -g

3.查看是否安装成功

npm list -g --depth 0

 二、创建项目

选择项目安装目录创建项目，运行：

vue init webpack demo1

• Project name  

　　项目名称

• Project description  

　　项目描述

• Author  

　　项目开发者

• Vue build  

　　Vue 有两种不同的构建——独立构建（standalone）和运行时构建（Runtime-only）。运行时构建删除了模板编译的功能，因此无法支持带 template 属性的 Vue 实例选项。

• Install vue-router？

　　安装vue路由依赖。

• Use ESlint to lint your code？

　　是否启用eslint代码规范检测？

• Set up unit tests

　　是否启用单元测试？

• Setup e2e tests with Nightwatch？

　　是否启用nightwatch框架进行e2e自动化测试？

、

进入项目根目录安装依赖，运行：

npm install

三、运行项目

1.开发模式下运行

npm run dev

运行结果如下：

2.打包压缩后运行

npm run build
npm start

运行结果同1。

3.双击index.html文件运行

项目打包后，根目录下生成“dist”文件夹，该文件夹内是项目打包后的项目文件。

直接双击运行index.html文件，浏览器内不显示任何内容，打开调试界面，报一下错误：

解决方法

打开项目根目录下的config文件夹，找到index.js文件中build对象，将assetsPublicPath: '/'中

的'/'改成'./'；

打开项目根目录下的build文件夹，找到build.js文件中的两句提示信息，删除或注释。