Vue-cli搭建

Vue-cli搭建

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。

Vue CLI官网介绍 https://cli.vuejs.org/zh/guide/

1. 安装Vue-cli

首先需要安装node.js和npm，然后开始安装vue cli(安装前最好把node.js和npm都更新到最新版)

npm install -g @vue/cli

2.创建项目

创建项目有两种方式,第一种是用npm创建,第二种是使用GUI创建。

2.1 npm创建项目

vue create 项目名

用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项：

 -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
 -d, --default                   忽略提示符并使用默认预设选项
 -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
 -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
 -r, --registry <url>            在安装依赖时使用指定的 npm registry
 -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
 -n, --no-git                    跳过 git 初始化
 -f, --force                     覆写目标目录可能存在的配置
 -c, --clone                     使用 git clone 获取远程预设选项
 -x, --proxy                     使用指定的代理创建项目
 -b, --bare                      创建项目时省略默认组件中的新手指导信息
 -h, --help                      输出使用帮助信息

随后会提示你选择预设,第一次创建项目有两种预设,第一种是系统推荐的babel和eslint,第二种是手动选择(推荐第二种) ，默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

选择手动配置,最后会提示保存该预设方案,根据项目需要选择合适的插件.

• Babel : 将ES6编译成ES5
• TypeScript: javascript类型的超集
• Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
• Router: vue-router
• Vuex: 状态管理
• CSS Pre-processors: CSS预处理
• Linter / Formatter: 开发规范
• Unit Testing: 单元测试
• E2E Testing: 端到端测试

按空格键选择项目需要的插件，回车键继续。

设置路由：这里询问你路由是否选择history模式，选择Yes就好。
设置css的预处理，我选择的是stylus 。Sass、LESS 和 Stylus区别

选择Linter / Formatter规范类型，选择ESLint Prettier

选择lint方式，保存时检查/提交时检查， 保存就检测 和 fix和commit时候检查 。

选择单元测试

babel,postcss,eslint等配置文件存放位置，这里随便选，我选择放在独立文件夹

确定后，等待下载依赖模块

2.2 使用图形化界面创建项目

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 其配置选项和npm创建项目一样。

3.目录结构

assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里。
main.js: 项目的核心文件。
test: 初始测试目录，可删除
.xxxx文件: 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

4. 启动项目

1. 初始完之后，进入到项目根目录： cd 项目名
2. 启动项目：npm run serve 或者是yarn serve
3. 在浏览器输入http://localhost:8080就可以看到vue的欢迎界面

5. 打包上线

1. vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build
   rve
2. 在浏览器输入http://localhost:8080就可以看到vue的欢迎界面