【Vue】四、我常用的vue项目初始化

 在此记录一下自己的vue常用初始化流程，方便寻找，也方便各位参考

cd vue_workplace

vue create 项目名称

选择vue2

打开项目后，配置App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body{
  height: 100%;
  margin:0;
  padding:0;
  border:0
}
</style>

index.js（已添加了一个login组件）

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: 'login'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

package.json中关闭命名规则（eslintConfig中加入）

    "rules": {
      "vue/multi-word-component-names": "off"
    }

main.js（引入几个常用的库）

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';
import router from './router'
import VueParticles from 'vue-particles'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VueParticles)
Vue.config.productionTip = false

Vue.use(ElementUI);

// 设置 axios 的默认请求地址
axios.defaults.baseURL = 'http://localhost:8080';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

安装常用依赖包

1.Sass

2.Sass 加载器

3.Axios

4.Element-UI

npm install sass
npm install sass-loader
npm install axios
npm install element-ui

以及一些我习惯使用的小组件

1.js-cookie

2.three

3.vanta

npm install js-cookie
npm install three
npm install vanta