1、首先得有node和npm的环境,node的下载:http://nodejs.org/download/。安装node之后,npm也自动生成了,显示版本号就意味着安装成功
2、接下来就是安装vue-cli脚手架,执行以下命令:
$ npm install -g vue-cli 安装脚手架
$ vue init webpack demo 利用webpack生成一个模板,项目名是demo
$ cd demo 进入到demo项目
$ npm install 安装依赖
$ npm run dev 运行项目
在浏览器执行 http://localhost:8080,出现以下截图意味着成功。
3、脚手架目录说明
.
├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要项目配置
│ └── ...
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 主应用程序组件
│ ├── components/ # ui组件
│ │ └── ...
│ └── assets/ # 模块资源(由webpack处理)
│ └── ...
├── static/ # 纯静态资源(直接复制)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── index.js # 测试构建条目文件
│ │ └── karma.conf.js # 测试跑步者配置文件
│ └── e2e/ # e2e测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── custom-assertions/ # e2e测试的自定义断言
│ │ ├── runner.js # 测试跑步脚本
│ │ └── nightwatch.conf.js # 测试跑步者配置文件
├── .babelrc # babel 配置
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # editor 配置
├── index.html # index.html模板
└── package.json # 构建脚本和依赖关系
注意:css、js、img等静态资源放在static下面,命名为css、js、img等,不然打包后会找不到路径
如需安装自己想要的文件,如:elementUI
在根目录找到 package.json,在"devDependencies"下加入 "element-ui": "^2.4.11",然后在命令窗口执行npm install就可以了。