构建需要用到npm和Nodejs,安装过程参照npm安装配置和Node安装配置
- 安装cnpm: 打开CMD,输入: npm install -g cnpm --registry=https://registry.npm.taobao.org
- 然后输入cnpm -v 若打印出版本号,则安装成功。
- 在项目所要放置的文件目录下打开CMD
- 输入 vue init webpack myproject2 初始化项目(ps: myproject2是项目名称)
模板下载完成后,Vue CLI引导我们进行项目配置
是的话回车就行。
在这里使用上下箭头可以选择,这里我是选第一个,然后回车。
回车,完成。
Pick an ESLint preset NO
Set up unit test NO
Setup e2e tests with Nightwatch NO
Should we run `npm install` for you after the project has been created? NO
进入项目文件夹,安装项目依赖,输入cnpm install
输入npm start 启动webpack-dev-server
打开浏览器,输入http://localhost:8081
然后, 在文件夹下查看myproject2
另开一个控制台,也是在myproject2文件夹目录下,输入npm run build构建项目的生产版本
再次查看文件夹下myproject2,发现多了一个dist文件夹
这样,使用Vue-CLI构建项目就完成了。
名称 | 说明 |
build | 开发和生产版本的构建脚本 |
config | 开发和生产版本的部分构建配置 |
dist | 由npm run build生成;项目的生产版本;项目完成后,交付该文件夹即可 |
src | 项目开发的关键资源目录和主要的工作区间 |
static | 静态资源(如使用JS赋值图片的src时,该图片的资源放在static目录下 |
.babelrc | babel的配置文件(babel,下一代JS的预编译器) |
.eslintigore | ESLint代码语法检测的配置文件(应忽略的语法格式) |
.eslintrc.js | ESLint代码语法检测的配置文件(应规范的语法格式) |
.gitignore | 应被Git版本控制工具忽略的文件 |
index.html | 应被webpack注入资源的模板html文件 |