这是我参与11月更文挑战的11天，活动详情查看：2021最后一次更文挑战
Vue CLI
使用 Vue Cli 需要先安装 Node.js。
在终端中运行 npm install nrm -g 安装 nrm 可以使用国内的镜像源。
运行 nrm ls 查看国内的镜像源：
npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.cloud.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/
运行 nrm use taobao 来使用 taobao 的镜像源：
Registry has been set to: https://registry.npmmirror.com/
运行 npm uninstall vue-cli -g 卸载旧版本脚手架。
运行 npm install -g @vue/cli 安装脚手架工具。
进入到相应文件夹，使用 vue create ProjectName来创建项目。
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter ver
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
我们还可以使用 Vue CLI 的 UI 界面来创建项目。命令行输入 vue ui，在 http://localhost:8000/project/select 中会显示 Vue 项目管理器。
根据提示逐步创建新项目。
这里创建一个 demo 项目，进入文件夹并启动该项目：
vue create demo
cd demo
npm run serve
在 http://localhost:8080/ 访问项目：
输入 Ctrl+C 关闭项目。
现在我们来看创建的脚手架。
src/main.js 中的代码创建一个 Vue 应用并挂载到 DOM 上：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Vue 应用来自 ./App.vue 这个文件。
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
单文件组件
.vue 的文件是一个单文件组件，模板、样式、逻辑都封装到一个文件中。.vue 文件的模板写在 <template> 标签中，样式写在 <style> 中，逻辑写在 <script> 中。
<script> 中从 ./components/HelloWorld.vue 引入了 HelloWorld 组件（这里简化了代码）：
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<style></style>
单文件 TodoList
Vue 项目默认使用 Git 管理。
运行 npm install 命令来安装项目需要的依赖。
下面的代码实现一个 TodoList：
// App.vue
<template>
<div>
<input v-model="inputValue" />
<button class="button" @click="handleClick">submit</button>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
name: "App",
setup() {
const inputValue = ref("");
const list = reactive([]);
const handleClick = () => {
list.push(inputValue.value);
inputValue.value = "";
};
return {
list,
inputValue,
handleClick,
};
},
};
</script>
<style>
.button {
margin-left: 20px;
}
</style>
我们可以将它拆分为几个子组件：
// App.vue
<template>
<div>
<input v-model="inputValue" />
<button class="button" @click="handleClick">submit</button>
<ul>
<list-item v-for="(item, index) in list" :key="index" :msg="item" />
</ul>
</div>
</template>
<script>
import { reactive, ref } from "vue";
import ListItem from "./components/ListItem.vue";
export default {
name: "App",
components: {
ListItem,
},
setup() {
const inputValue = ref("");
const list = reactive([]);
const handleClick = () => {
list.push(inputValue.value);
inputValue.value = "";
};
return {
list,
inputValue,
handleClick,
};
},
};
</script>
<style>
.button {
margin-left: 20px;
color: blue;
}
</style>
// components/ListItem.vue
<template>
<li class="button">{{ msg }}</li>
</template>
<script>
export default {
name: "ListItem",
props: {
msg: String,
},
};
</script>
<style>
</style>
可以看到，子组件可以使用父组件的样式。
