总结一下vue-cli 脚手架使用过程
一、vue-cli安装的先决条件(不可缺):
1、node环境,node版本大于等于4.0,官方推荐6.0;
2、npm版本大于3.0,;
3、Git
二、安装
1、全局安装webpack;
$ npm i webpack -g
2、全局安装vue-cli;
$ npm install -g vue-cli
3、然后创建目录,在目录中运行指令,初始化项目
$ vue init < template-name > < project-name >
例:
$ vue init webpack my-project (如果怎么都创建不成功,不能生成结构,可采取删去电脑本地的vue-cli(
$ npm uninstall -g vue-cli)重新下载(vue-cli脚手架))
安装成功,通过提示,一直enter即可。
4、模板的选择,一般情况采用上述的选择,
5、下载依赖 (等待时间稍微有点久)
$ npm i
-
-
webpack - 一个全功能的Webpack + vue-loader设置,带有热重新加载,linting,测试和css提取。
-
webpack-simple - 一个简单的Webpack + vue-loader设置,用于快速原型设计。
-
browserify -全功能Browserify + vueify设置用热重装载,掉毛&单元测试。
-
browserify-simple - 一个简单的Browserify + vueify设置,用于快速原型制作。
-
pwa - 基于webpack模板的vue-cli的PWA模板
-
simple - 单个HTML文件中最简单的Vue设置
-
三、文件配置具体说明
1、build——[webpack配置]
build文件主要webpack配置,npm run dev 就是运行的dev-sever.js;npm run build运行的是build.js。
2、package.json 项目的基本信息,和依赖项
3、config——[vue项目配置]
index.js配置
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
在码云创建项目 :克隆到本地
不要点进去文件夹 就在此处打开命令窗口
- vue init webpack vue-demo(vue-demo 是刚刚clone下来的文件夹名字 )
- Project name 项目名称(这个项目名称随便起 无所谓)
- Project description 项目简介
- Author 作者姓名
- Vue build 上一步之后 按回车就是这一步
- Install vue-router 是否安装路由 (肯定的)
- Use ESlint to lint your code 是否启用代码风格检测 (个人建议不启用,要求太严格,不利于开发效率)
- Set up unit tests 是否使用单元格检测 (我选择 n)
- Setup e2e tests with Nightwatch 一种单元格检测工具 (我选择 n)
- 到这一步可以选择 使用npm启动