Vue使用
<!-- 从三方网站引入网上的vue。需要网络 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
<!-- 从vue官网下载vue.js文件，本地引入。不需要网络-->
<script src="./js/vue.js"></script>
（推荐）我们一般采用脚手架来完成开发
（不推荐）谷歌或Edge浏览器搜Vue devtools 点击扩展，获得扩展，搜索安装即可,但是这样开发效率不高。
Vue的脚手架使用
1、选中一个存放项目的文件夹，右键–>【在集成终端中打开】
2、安装工具类的包 一般是全局安装
在终端输入npm i -g @vue/cli
npm i -g @vue/cli
注意当前vue脚手架是webpack打包的；当前 vue2 => vue-cli 5.0.8
3、构建项目
在终端输入【vue create 项目名称(不可以是中文)】,然后回车。
例如：vue create vue01 或 vue create vue02 或 vue create vue03 ...
（1）选择【> Manually select features 自定义安装】。然后按回车。
（键盘的↑、↓、←、→可移动选择，空格键是确认键。下文同理，不再赘述）
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint) //**默认vue3 babel, eslint**
Default ([Vue 2] babel, eslint) //**默认vue2 babel, eslint**
> Manually select features //**自定义安装**
（2）选择下述带（*）的插件
（键盘的↑、↓、←、→可移动选择，空格键是确认键。下文同理，不再赘述）
Vue CLI v5.0.8
? Please pick a preset: Manually select features? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
(*) Babel> 转化器 //选择插件
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors //css预处理器 sacc less
( ) Linter / Formatter //语法校验 先不用 校验比较严格
( ) Unit Testing
( ) E2E Testing
（3）vue3版本和2版本均可，这里作者选择用的是vue2版本。
Vue CLI v5.0.8
? Please pick a preset: Manually select features? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
3.x
> 2.x //选择2版本
（4）选择预处理器Sass/SCSS (with dart-sass)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Less
Stylus
（5）这里我们选择独立配置文件【In dedicated config files】
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
(6)是否保存（随便啦，y是yes保存，）
? Save this as a preset for future projects? Yes
? Save preset as: vue01 //vue01是我取的保存名称哦，随便取
（7）记得切换到要项目文件夹。通过输入cd 项目名切换，例如cd vue01
🎉 Successfully created project vue02.
👉 Get started with the following commands:
$ cd vue02
$ npm run serve
最后，介绍一下生成的Vue02的文件结构
4、vue的运行
注意vue文件千万不要试图用open with live server打开，此法根本打不开
1、右键点击【vue02】文件夹，点击【在集成终端中打开】；
2、在终端输入npm run serve 后回车 运行
注意 需要知道你当前是不是在vue02项目中
3、 上图蓝色地址是项目运行结果的地址，
- Local是本地地址，【按住ctrl+鼠标单击】地址访问即可
- Local: http://localhost:8080/
- Network是局域地址 统一局域网可以访问
- Network: http://192.168.31.53:8080/
停止项目运行，在终端输入 Ctrl + c （1次停不了 ，就ctrl+c两次…）
到此就讲完了，把项目代码写好之后，运行npm run serve就能看到vue结果了。
补充：
npm run bulid 打包上线
注意，打包完毕的运行不了哦， 需要放在服务器上运行
