vue cli 脚手架
最近在b站上看了一个视频https://www.bilibili.com/video/BV137411B7vB，是个Springboot+vue实现前后端分离的项目，从而了解到了vuecli脚手架以及element ui
首先要说一下踩过的坑，上来啥都没干先踩了个大坑，而且时间还赶着软件著作权补正，一度让我很焦灼，经过了三四个小时终于解决了，下面先说一下这个坑，同时也提醒一定不要踩！！！
众所周知vuecli需要安装node环境，而我在做socket.io的时候已经下载并配置好node环境了，在看一个不靠谱的视频的时候，这个up说可以配置npm全局安装的路径
具体操作是
npm config set prefix "/Path"
npm config set cache "/Path"
然后我就手贱改了一下，然后就各种报错，查不到vuecli的版本，当时我就慌了，很快啊 出了一脑门子的汗，通过各路大佬的面向百度编程经验，查到了有人说这玩意无法恢复原默认路径，查完我更慌了，wdnmd还改不回来了？？？wtf ？？？作为新时代的社会主义新青年兼中国共产党入党积极分子兼海事大学研究生，怎么可能轻易放弃，想到两种解决方法，一是将错就错，接着按照这个修改过的路径继续安装；另一种是找办法把原始的默认路径修改回来。一共就两种办法，二选一50%的概率能选择正确的方向并在短时间内解决，结果我选了个错的方向，差点一条路走到黑，还好及时回头悬崖勒马，找办法把默认路径改回来，最后的解决办法是
npm config set prefix /usr/local
/usr/local就是默认的路径，终于被我找到了，修改了之后期待已久的vue版本查询终于好用了，开心的像个二百斤的傻子！
安装
npm install -g @vue/cli //@vue/cli是3.0以上，但是我安完是4.5.13
由于我之前安装过node、npm，所以这些都不说了
安装完成vuecli之后就可以用ui来进入脚手架了
-新建文件夹，然后进入终端，输入“vue ui”，然后进行初始配置
文档目录结构
node_modules 第三方依赖，我们安装的各种依赖都在个文件件里面
public 存放公共资源的地方，里面有一个index.html
src 这个是重点，我们的源码以及开发的静态资源等都在里面
src/assets 静态资源，css、img、js、font等
src/compoments 自定义的公共组件
src/router 路由配置，用于页面的跳转配置
src/views 视图组件
src/store 是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
App.vue 首页组件（默认组件）,也叫根组件
main.js 入口文件，一切的入口
.browserslistrc 配置使用CSS兼容性插件的使用范围
.eslintrc.js 配置ESLint
babel.config.js 使用一些预设
package.json 项目描述既依赖
package-lock.json 版本管理使用的文件
路由
路由去找router里的index.js
|–src
|—router
|----index.js
所有的路由都在这里配置
在页面（App.vue）需要路由的地方设置
<router-view/>
写路由的时候，App.vue相当于一个入口，里面只放个router-link就行（不确定）
页面写完可以放在views里面，页面由template、script、style三个大标签组成
然后在index.js里进行路由配置：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',redirect:'/home'
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
routes
})
export default router
export和import是一对，想在别的文件中使用组件，就得先把组件export暴露出来，在想使用的文件里import引入该组件
Element ui
? 1.首先使用下面的命令进行安装
cd 当前的app文件夹中
npm i element-ui -S
? 2.在ui控制台里安装element ui的插件
安装好之后，App.vue会有一些变化，都是范例，不想用直接删除就好
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
|