小青苔基地Vue学习笔记(九) Vue CLI
我们可以使用 vue serve 和 vue build 命令对单个 .vue 文件进行快速原型开发
不过在此之前，我们需要额外安装一个全局拓展
> npm install -g @vue/cli-service-global
（1）vue serve
vue serve 命令用于在开发环境下零配置为 .js 或 .vue 文件启动一个服务器
> vue serve --help
Usage: serve [options] [entry]
serve a .js or .vue file in development mode with zero config
Options:
-o, --open Open browser
-c, --copy Copy local url to clipboard
-h, --help output usage information
该命令的默认入口文件为 main.js、index.js、App.vue 或 app.vue ，当然也可以显式指定
我们可以到刚才创建的 Hello.vue 文件的文件夹下运行如下命令
> vue serve Hello.vue
DONE Compiled successfully in 5267ms
App running at:
- Local: http://localhost:8080
- Network: http://172.20.10.12:8080
Note that the development build is not optimized.
To create a production build, run `npm run build`.
这时，我们在浏览器中访问 http://localhost:8080 即可看到我们的应用
（2）vue build
vue build 命令用于在生产环境模式下零配置构建一个 .js 或 .vue 文件
> vue build --help
Usage: build [options] [entry]
build a .js or .vue file in production mode with zero config
Options:
-t, --target <target> Build target (app | lib | wc | wc-async, default: app)
-n, --name <name> name for lib or web-component mode (default: entry filename)
-d, --dest <dir> output directory (default: dist)
-h, --help output usage information
5、创建项目
- 我们可以使用
vue create project-name命令创建一个项目
> vue create mini-project
- 首先，选择一个预设的模板，这里有两个选项（单选）：
- default (babel, eslint)：默认设置，适合创建一个简单的项目
- Manually select features：手动配置，适合在生产环境中使用（绝大多数情况下需要选择这个）
我们选择 Manually select features
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
- 然后，选择需要使用的特性，这里有九个选项（多选）：
- Babel：JavaScript 编译器（默认已选择）
- TypeScript：JavaScript 超集
- Progressive Web App (PWA) Support：渐进式 Web 应用
- Router：Vue 路由
- Vuex：Vue 状态管理
- CSS Pre-processors：CSS 预处理器
- Linter / Formatter：代码风格检查和代码格式化（默认已选择）
- Unit Testing：单元测试
- E2E Testing：端到端测试
我们选择 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
> (*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
- 接着，为 Router 选择路由模式，这里有两个选项（Y/n）：
- Y：使用 history mode，URL 中不带有 # 符号，但是需要后台配置支持
- n：使用 hash mode，URL 中会带有 # 符号，但 # 符号并不包含在 HTTP 请求中
我们选择 n
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
- 接着，选择 CSS Pre-processors，这里有四个选项（单选）
- Sass/SCSS (with dart-sass)
- Sass/SCSS (with node-sass)
- Less
- Stylus
我们选择 Less
? Pick a CSS Pre-processors (PostCSS, Autoprefixer ans CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
> Less
Stylus
- 接着，选择 Linter / Formatter，这里有四个选项（单选）：
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config
- ESLint + Prettier
我们选择 ESLint + Standard config
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
- 接着，选择在什么时间进行检测，这里有两个选项（多选）：
- Lint on save：保存时检测
- Lint and fix on commit：提交时检测
我们选择 Lint on save
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> (*) Lint on save
( ) Lint and fix on commit
- 接着，选择在什么位置保存配置文件，这里有两个选项（单选）：
- In dedicated config files：独立保存为 config 文件
- In package.json：全部保存在 package.json 文件
我们选择 In dedicated config files
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
- 最后，选择是否保存本次配置以便于下次使用，这里有两个选项（y/N）：
- y：保存配置
- N：不保存配置
我们选择 N
? Save this as a preset for future projects? (y/N)
之后，就可以等待 @vue/cli 为我们创建项目啦~
6、项目结构
在创建成功之后，我们可以利用命令 cd mini-project 进入目录，利用命令 npm run serve 运行项目
这些就不细说啦，具体用法可以参考一下 README.md 文件（在根目录下）
下面我们主要看看利用 @vue/cli 创建的项目的目录结构是怎么样的
+ mini-project
+ node_modules（存放第三方模块）
+ public（存放静态文件）
- favicon.ico（图标）
- index.html（页面模板）
+ src（我们自己写的文件一般放在这个文件夹下）
+ assets（存放资源文件）
+ components（存放公共组件）
+ views（存放视图组件）
- App.vue（页面入口文件）
- main.js（程序入口文件）
- router.js（路由管理：Router）
- store.js（状态管理：Vuex）
- package.json（项目配置文件）
- package-lock.json（项目配置文件）
- babel.config.js（babel 配置文件）
- postcss.config（postcss 配置文件）
- README.md（项目说明文档）
- ...（其它配置文件）
注意
在 3.x 版本之后，CLI 不会自动创建配置文件，这是因为项目在初始化的时候已经配置好绝大部分配置
如果还需要手动配置，那么我们就要到根目录下创建一个名为 vue.config.js 的文件
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，则会被 @vue/cli-service 自动加载
1.本站默认解压密码为：xiaoqingtai.com
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » Vue学习笔记(九) Vue CLI
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » Vue学习笔记(九) Vue CLI
