================================================================================
Vue CLI 中项目开发方式：一切皆组件！
-
VueCLI 开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统。
-
日后在使用 Vue CLI 进行开发时不再书写html，编写的是一个个组件(.vue文件)，打包时 Vue CLI 会将组件编译成运行的 html 文件。
（1）使用以下命令来创建一个新项目：
vue create hello-world
（2）我们选择 手动配置：用方向键 ↑ ↓ 操控选项，Enter 确定；
Please pick a preset: (Use arrow keys)
default (babel, eslint) # 默认配置
Manually select features # 手动配置
（3）选择配置，勾选如下即可：方向键 ↑ ↓ 操作，按空格选中，Enter 确定；
Vue CLI v4.4.6
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
（4）首先检查刚才选择的配置；
然后问我们是否使用 history mode，其实就是页面路由含不含有 #；这里我们选择 Y
Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
y
（5）选择CSS预编译器，这里我们选择Less；
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
（6）选择 ESLint 代码校验规则，提供一个插件化的 javascript 代码检测工具，这里我们选择 ESLint + Prettier;
Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
（7）选择什么时候进行代码校验，Lint on save：保存就检查，
Lint and fix on commit：fix 或者 commit 的时候检查，这里我们选择第一个；
Pick additional lint features: (Press to select, to toggle all, to invert selection)
(*) Lint on save
( ) Lint and fix on commit
（8）选择把配置保存到哪个文件中，
In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中，
这里我们选择放到 package.json 中；
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In package.json
（9）问我们是否保存刚才的配置，以后的文件可以直接使用，选择 N。
Save this as a preset for future projects? (y/N)
N
至此项目搭建完毕。
使用如下命令运行项目：
cd hello-world # 首先进入项目根路径
npm run serve # 运行项目
浏览器输入如下路径来访问项目：
使用图形化界面创建和管理项目：
vue ui
-
node_modules：用于存放我们项目的各种依赖； -
public：用于存放静态资源（不会变动的）； -
public/index.html：模板文件，作用是生成项目的入口文件。
浏览器访问项目的时候就会默认打开的是生成好的 index.html。
-
src：是存放各种 .vue 文件的地方。 -
src/assets：用于存放着各种静态文件（可能会变动），比如图片。 -
src/components：存放公共组件（可复用），比如 header.vue、footer.vue 等。 -
src/router/index.js：vue-router 路由文件。
需要引入 src/views 文件夹下的 .vue，配置 path、name、component。
src/store/index.js：是 vuex 的文件，主要用于项目里边的一些状态保存。
比如 state、mutations、actions、getters、modules。
-
src/views，存放页面组件（不可复用），比如 Login.vue，Home.vue。 -
src/App.vue：App.vue 是项目的主组件；
App.vue 中使用 router-link 引入其他模块，所有的页面都是在 App.vue 下切换的。
-
src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。 -
.gitignore：配置 git 上传想要忽略的文件格式。 -
babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。 -
package.json：模块基本信息项目开发所需要的模块，版本，项目名称。 -
package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
安装 axios：
npm install axios --save-dev
配置文件 main.js 中引入 axios：
import axios from 'axios';
Vue.prototype.$http=axios;
使用 axios：·
this.$http.get("url").then((res)=>{});
this.$http.post("url").then((res)=>{});
在项目根目录中执行如下命令：
npm run build
注：Vue脚手架打包的项目必须在服务器上运行，不能直接双击运行；
在打包之后项目中出现 dist 目录，dist 目录就是 Vue脚手架项目的生产目录（直接部署目录）。
打包完后，如何将项目部署到 SpringBoot 项目上呢？
将打包好的 dist 目录放到 SpringBoot 项目的 static 目录下；
由于我在配置文件中配置了项目路径：（没有访问路径则不需要修改）
server.servlet.context-path=/vue
所以要修改一下 index.html 中引入资源文件的路径；
通过以下路径访问部署的前端页面：
http://localhost:8989/vue/dist/index.html
vue-cli4 中的 views 和 components 有什么区别？
========================================================================================================
components 是小组件；views 是页面级组件；
components 可被引用在 views 中，一般 views 组件不被复用；
========================================================================================
下载 Vetur 插件，然后修改 Settings.json：
{
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html":"html",
"vue":"html"
},
"files.associations": {
"*.vue": "html"
}
}
================================================================================
在 src/router/inde.jx 文件下可以修改：mode: "history" 不显示 #；
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
这个模式无法通过 a 标签来切换组件，需要使用 router-link 标签；
添加
在 src/router/inde.jx 文件下可以修改：mode: "hash" 会显示 #
const router = new VueRouter({
mode: "hash",
base: process.env.BASE_URL,
routes
});
这个模式可以通过 a 标签来切换组件，也可以通过 router-link 标签；
添加
================================================================================
查看端口 8989 被哪个进程占用：
netstat -ano | findstr "8989"
查看进程号为 3736 对应的进程；由下图可以看出，是被 java.exe 占用了：
tasklist | findstr "3736"
结束该进程：
总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
