脚手架的意义
脚手架是开发现代web应用的必备
- 充分利用
webpack,babel,eslint等工具辅助项目开发 - 开箱即用，零配置。无需手动配置繁琐的工具即可使用
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
安装vue脚手架 vue-cli
全局安装：
npm install -g @vue/cli安装成功验证：
# vue -V
@vue/cli 4.5.15通过vue-cli 脚手架创建vue3 项目
vue create vue-demo注意选择vue3即可
pycharm中安装vue.js插件并且导入项目
添加vue.config.js配置文件
vue项目中，我们可以发现没有webpacke的打包配置文件webpack.config.js。那是vue-cli已经将该配置隐藏了，但是如果我们有需要，可以添加一个vue.config.js来覆盖一些相关配置。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
// vue.config.js
module.exports = {
// 覆盖一些webpack的基本配置
devServer: {
port: 3000, // 默认端口为8080
open: true // 启动时，自动打开浏览器
}
}vue项目-目录解析
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。 assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。 |
| static | 静态资源目录，如图片、字体等。 |
| public | 公共资源目录。 |
| package.json | 项目配置文件 |
| dist | 使用 npm run build 命令打包后会生成该目录 |
src/main.js 项目打包的入口文件
通过分析其内容,可知：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
// App.vue 组件被导入进来，创建Vue实例的时候，指定了App.vue组件
// Vue.createApp(App): 传入的App.vue 组件成为根组件
// vue实例被挂载到public/index.html 中的id=app 元素上。
createApp(App).mount('#app')src/App.vue 项目根组件
<!-- 组件的模板 -->
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- 在组件中，使用其他组件 -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<!-- 组件JS逻辑：它应该导出一个 Vue 组件定义作为其默认导出 -->
<script>
// 在组件中引入其他组件
import HelloWorld from './components/HelloWorld.vue'
export default {
// 导出组件的配置项，所有的组件配置项都可以使用，如 data,methods,computed,watch，components,created等生命周期钩子函数...
// template 特殊，不需要写，独立在<template>标签中
name: 'App',
// 注册组件
components: {
// 要在组件模板中使用其他组件，那么该组件必须引入进来，并且注册，方可使用。
HelloWorld
}
}
</script>
<!-- 与此组件关联的 CSS -->
<style lang="less">
/* 通过lang="less" 允许使用less语法
如果通过脚手架默认配置创建的项目，less-loader 没有被安装，可以通过以下命令安装：
npm install -D less-loader@7.x less
*/
#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>
启动服务后，可见首页访问的内容就是App.vue文件上的内容。
单文件组件
官网介绍：https://v3.cn.vuejs.org/guide/single-file-component.html
Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许 将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。
每个 *.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>
-
<script>部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。 -
<template>部分定义了组件的模板。 -
<style>部分定义了与此组件关联的 CSS。
编译后的 SFC 是一个标准的 JavaScript（ES）模块——这意味着通过正确的构建配置，可以像模块一样导入 SFC：
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。
