搭建Vue项目

Vue CLI4

环境搭建：

1. 打开cmd进入文件夹。
2. npm install @vue/cli -g全局安装vue-cli。
3. vue create vue-demo新建项目，vue-demo是项目的名字。
4. npm run server运行项目。
5. npm run build打包项目，运行完成之后会在项目里面增加一个dist的目录，直接复制这个目录丢给服务器就好了。

安装使用Vue Router：

1. npm install vue-router --save-dev安装Vue Router。
2. 在src文件夹下新建router文件夹，router文件夹下新建index.js文件。

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
   
   const routes = [
       {
           path: '/',
           redirect: '/login'
       },
       {
           path: '/login',
           name: 'Login',
           component: () => import('../pages/Login/Login.vue')
       }
   ]
   
   const router = new VueRouter({
       routes,
       mode: 'hash'
   })
   
   export default router
   

3. 在main.js中引入router。

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

安装使用axios：

1. 安装axios：npm install axios --save。
2. 在src文件夹下新建http文件夹存放公共文件，在http文件夹下新建http.js。

   import Axios from "axios"
   
   export default {
     install(Vue, options) {
       var instance = Axios.create({
         baseURL:"http://localhost:3000",
         headers: {}
       });
       Vue.prototype.query = function (method,url,data,callback) {
         instance({
           method:method,
           url:url,
           data:data
         }).then(callback)
       }
     }
   }
   

3. 在main.js文件中引入，就可以全局使用this.方法名使用了。

   import Query from './common/query.js'
   Vue.use(Query); 
   

安装使用Element-UI：

1. npm i element-ui -S安装element-ui。
2. 打开src目录下的main.js引用element-ui。

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI)
   

安装使用Sass：

1. 安装依赖包。

   npm install --save-dev node-sass
   npm install --save-dev sass-loader   //sass-loader依赖于node-sass
   

   node-sass需要去github上下载部分文件，可能会由于网速问题导致安装失败，重复删除->安装这一步骤，大概率最终会成功。

2. 给组件中的style元素添加lang="scss"属性。

以上操作就可以在组件的style元素里写sass里。

如果想创建公用的sass文件，以方便每个组件引用，可以做如下操作。

3. 在src文件夹下新建common文件夹，common文件夹下新建css文件夹，css文件夹下common.scss文件，存放全局Sass样式。
4. 在vue.config.js文件中添加以下配置。

    css: {
           loaderOptions: {
               sass: {
                  prependData: `@import "@/common/css/common.scss";`
               }
           }
       }
   

5. 在main.js中引入common.scss，所有组件即可使用公共Sass样式。（或者也可各个组件单独引入：@import '../../common/css/common.scss'）

   import './common/css/common.scss';
   

安装使用jQuery：

1. 安装依赖包：npm install jquery。
2. 在webpack.config.js中进行以下配置。

   const webpack = require("webpack")
   
   //在module.exports里面加入
   configureWebpack: {
           plugins: [
               new webpack.ProvidePlugin({
                   $:"jquery",
   
                   jQuery:"jquery",
                   "windows.jQuery":"jquery"
               })
           ]
    }
   

3. 如果开启了eslint检查，那么需要在package.json中设置jquery: true，否则编译时会报错。

   "eslintConfig": {
       "root": true,
       "env": {
         "node": true,
         "jquery": true
       }
   

4. 在main.js中全局引入，就可以使用了：

   import $ from 'jquery';
   

px2rem和lib-flexible的使用：

1. 安装px2rem-loader和 lib-flexible：npm install px2rem-loader -s和npm install lib-flexible -s。
2. 在main.js中import 'lib-flexible/flexible'引入lib-flexible。
3. 在vue项目中build下的 utils.js中，修改配置：

    var px2remLoader = {
       loader: 'px2rem-loader',
       options: {
         remUnit: 64//设计稿宽度/10
       }
     };
   
     // generate loader string to be used with extract text plugin
     function generateLoaders(loader, loaderOptions) {
       var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
       if (loader) {
         loaders.push({
           loader: loader + '-loader',
           options: Object.assign({}, loaderOptions, {
             sourceMap: options.sourceMap
           })
         })
       }
   

babel-polyfill：

因为IE对es6语法不支持，所以为了兼容IE，需要引入babel-polyfill。

1. 安装：npm install --save-dev babel-polyfill;
2. 在main.js中引入：import ‘babel-polyfill’

iconfont的使用：

1. 将选择的图标下载到本地，复制到工程中。
2. 在main.js中引入。

   import './assets/iconfont/iconfont.css'
   

3. 在需要的地方就可以使用了：

引用公共样式表：

1. 在src下新建common文件夹，common文件夹下css文件夹，css文件夹下新建common.css文件；
2. 在main.js中import './common/css/common.css'引入；

项目目录：

1. node_modules：项目的依赖模块 ；
2. dist：存放打包后的文件；
3. public：公共文件夹。
   • index.html：项目打包时会以该文件为母板。
4. src：资源文件夹。
   • App.vue：主组件，所有组件都是在App.vue下进行切换的。
   • main.js：webpack打包的入口文件。
   • assets：存放图片之类的资源。
   • components：组件文件夹。
   • pages：存放各页面的组件。
   • router：存放路由。
   • store：存放状态管理。
   • http：存放请求接口。
   • common：存放共用的css、js等。
5. webpack.config.js：webpack配置文件。
6. babel.config.js：babel配置文件。