Vue CLI 是 Vue 的脚手架工具,它可以帮助我们快速生成 Vue 基础项目代码,提供开箱即用的功能特性。
- 基础代码目录结构
- 开发服务
- 本地调试
- 代码部署
- 热加载
- 单元测试
- …
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
安装
依赖要求:
- Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
使用 vue --version
确认是否安装成功。
注意:仅需安装一次就可以了,以后直接使用即可。
使用 vue --help
查看使用帮助。
创建项目
如果你还没有安装 VueCLI,请执行下面的命令安装或是升级:
npm install --global @vue/cli
在命令行中输入以下命令创建 Vue 项目:
vue create toutiao-m
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
> Manually select features
default:默认勾选 babel、eslint,回车之后直接进入装包 manually:自定义勾选特性配置,选择完毕之后,才会进入装包 选择第 2 种:手动选择特性,支持更多自定义选项
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
分别选择:
- Babel:es6 转 es5
- Router:路由
- Vuex:数据容器,存储共享数据
- CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
- Linter / Formatter:代码格式校验
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
是否使用 history 路由模式,这种模式兼容不好,所以这里输入
n
不使用
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
> Less
Stylus
选择 CSS 预处理器,这里选择我们熟悉的 Less
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
选择校验工具,这里选择 ESLint + Standard config
? Pick additional lint features:
(*) Lint on save
>(*) Lint and fix on commit
选择在什么时机下触发代码格式校验:
- Lint on save:每当保存文件的时候
- Lint and fix on commit:每当执行
git commit
提交的时候
这里建议两个都选上,更严谨。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:
- In dedicated config files:分别保存到单独的配置文件
- In package.json:保存到 package.json 文件中
这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。
? Save this as a preset for future projects? (y/N) N
这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。
这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。
✨ Creating project in C:\Users\LPZ\Desktop\topline-m\.
� Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
[ ........] - extract:object-keys: sill extract json5@2.1.1
向导配置结束,开始装包。 安装包的时间可能较长,请耐心等待……
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project topline-m-89.
� Get started with the following commands:
$ cd topline-m
$ npm run serve
安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入:
# 进入你的项目目录
cd toutiao-m
# 启动开发服务
npm run serve
DONE Compiled successfully in 7527ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.10.216:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
启动成功,命令行中输出项目的 http 访问地址。 打开浏览器,输入其中任何一个地址进行访问。
目录结构
名称 | 说明 |
---|---|
node_modules | 第三方包存储目录 |
public | 静态资源,已被托管 |
src | 源代码 |
.gitignore | git 忽略文件,暂时不关心,我们还没有在项目中使用 git |
babel.config.js | 先不关心 |
package.json | 包说明文件 |
README.md | 项目说明文件 |
package-lock.json | 包的版本锁定文件 |
src 目录结构
名称 | 说明 |
---|---|
assets | 资源目录,存储静态资源,例如图片等 |
components | 存储其它组件的目录 |
App.vue | 根组件 |
main.js | 入口文件 |
程序的启动
- 找到
main.js
入口 - 加载 Vue
- 加载 App 组件
- 创建 Vue 实例
- 将 App 组件替换到入口节点
接下来,我们就不再去 html 页面中写模板了,而是一切皆组件。
.vue 单文件组件
template
- 作用:组件的模板
- 注意:只能有一个根节点(template 本身不算)
script
- 作用:组件的 JavaScript ,用来配置组件的选项(data、methods、watch。。。)
写法规则:
<script>
// 1. 使用一个普通对象配置组件的选项
const componentOptions = {
data() {
return {};
},
methods: {}
};
// 2. 将这个对象导出(组件的选项对象必须显式的导出,否则不会生效)
export default componentOptions;
</script>
为了方便,我们可以直接在定义的同时直接导出
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
style
当 <style>
标签有 scoped
属性时,它的 CSS 只作用于当前组件中的元素。
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
转换结果:
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
你可以在一个组件中同时使用有 scoped 和非 scoped 样式:
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
使用 scoped
后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
<style scoped>
.a >>> .b {
/* ... */
}
</style>
上述代码将会编译成:
.a[data-v-f3f3eg9] .b {
/* ... */
}
单文件组件的定义和使用
创建单文件组件
- 推荐把通用组件创建到
components
目录中 - 把视图组件定义到
views
目录中 - 单文件组件只是承载组件的容器而已,既不是全局也不是局部,如果要使用这个单文件组件,必须 注册
- 全局注册使用,可以在任何组件中使用
- 局部注册使用,只能在注册的组件中被使用
<template>
<div>
foo 组件
</div>
</template>
<script>
export default {
data() {},
methods: {}
// ...
};
</script>
<style></style>
全局注册使用
在 main.js 文件中
...
import Vue from 'vue'
import Com1 from './components/Com1.vue'
...
Vue.component('Com1', Com1)
接下来就可以在任何组件中使用 Com1
组件了。
局部注册使用
在某个组价中局部注册使用
<template>
<div>
<!-- 使用 Com2 组件 -->
<Com2></Com2>
</div>
</template>
<script>
import Com2 from "./components/Com2";
export default {
components: {
Com2
}
};
</script>
热重载
当使用脚手架工具 vue-cli
时,热重载是开箱即用的。
“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 .vue
文件时,该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态!当你调整模版或者修改样式时,这极大地提高了开发体验。
状态保留规则
- 当编辑一个组件的
<template>
时,这个组件实例将就地重新渲染,并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。 - 当编辑一个组件的
<script>
时,这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为<script>
可能包含带有副作用的生命周期钩子,所以将重新渲染替换为重新加载是必须的,这样做可以确保组件行为的一致性。这也意味着,如果你的组件带有全局副作用,则整个页面将会被重新加载。