项目介绍.md 1.7 KB
2.安装全局模块
webpack
npm install -g webpack
npm install -g gulp
npm install -g vue-cli
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理
gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务
3.创建项目
vue init webpack-simple vuedemo02
npm install --save-dev gulp gulp-sftp del sass-loader node-sass shelljs ora
npm install --save vue vue-router vuex
5.搭建开发环境
- config/index.js 配置项目开发时的信息
- webpack.config.js webpack打包配置
- .babelrc ES6编译配置
- server.js 设置代理服务器
- gulpfile.js 自动化打包，编译，压缩，部署服务器
- package.json 执行npm init 初始化项目，自定义命令，启动程序，自动部署
6.测试编译
src/template/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2-demo</title>
</head>
<body>
</body>
</html>
src/main.js
alert('test')
1.运行程序执行命令：npm run dev
2.然后打开网址：http://localhost:3000/app/
3.如果浏览器弹出test，说明我们的开发环境已经搭建通过。
package.json自定义命令说明
npm run dev 开发环境
npm run dev:test 将代码打包到测试服务器
npm run dev:dist 将代码打包到正式服务器