vue-cli 项目搭建

1. 初始化

需要安装 node

vue-cli 2.x

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project(my-project为自己项目的名称)
# 打开项目运行
cd my-project
npm run dev

vue-cli 3.x

# 全局安装 vue-cli
npm install --global @vue/cli
# 创建一个新项目
vue create my-project(my-project为自己项目的名称)
# 打开项目运行
cd my-project
npm run serve

若已全局安装 vue-cli3.x 仍想用 vue-cli2.x 则需要重新安装依赖：

 npm i -g @vue/cli-init

然后按照上面 vue-cli2.x 进行操作即可

2. main.js

项目的入口 js

• 若vue-cli版本为2.x，项目中需要vuex则自行下载
• 若vue-cli版本为3.x，创建时会有vuex下载依赖，无需自己再重新下载
• 若还需要其他依赖则自行下载并在页面中引入，如：vue-resource

import Vue from 'vue'
// 主页面
import App from './App'
// 路由
import router from './router’
// http 请求数据
import resource from 'vue-resource’
// vuex 状态管理
import store from './store.js’
// 引入所需js
import 'static/js/index.js'
// 引入所需css
import 'static/css/index.css’

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

vue-cli2.x

// 创建 vue 实例
new Vue({
  el: '#app',
  router, // 引用路由
  store, // 引用 vuex 状态管理
  components: { App },
  template: '<App/>'
})

vue-cli3.x

// 创建 vue 实例
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. router.js

• Vue Router 路由基础配置：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import HelloWorld from '@/components/HelloWorld'
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

• 路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import ('@/components/HelloWorld'),
    }
  ]
})

• 路由模式：mode

默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，不过这种模式需要后台配置支持

export default new Router({
  mode: 'history',
  routes:[]
})

4. store.js

vuex 简单配置：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//要设置的全局访问的state对象，初始属性值
const state = {
  lang: 'en',
}
//实时监听state值的变化(最新状态)
const getters = {
  getLang(state) {//承载变化的值
    return state.lang
  },
}
//自定义改变state初始值的方法
const mutations = {
  // 这里面的参数除了state之外还可以再传额外的参数(变量或对象);
  setLang(state, val) {
    i18n.setUserLanguage(val)
    state.lang = val;
  },
}
//异步触发mutations里面的方法
const actions = {
  // context与store 实例具有相同方法和属性
  setLang(context, val) {
    context.commit('setLang', val)
  },
}
export default new Vuex.Store({
  state: state,
  getters: getters,
  mutations: mutations,
  actions: actions
})

在vue页面中的应用

import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
export default{
  computed:{
    //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
    ...mapGetters({
      lang: "getLang"
    })
  },
  methods:{
    ...mapActions(['setLang']),
    switchLang(lang){
      this.setLang(lang);
    }
  }
}

5. axios/vue-resource

点击此处 http请求工具vue-resource / axios 查看详情

6. 生产和开发环境配置

vue-cli2.x

• 基础配置目录：my-project/build/
  这里仅列出webpack.base.conf.js中部分代码

const path = require('path')
const webpack = require("webpack")

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    // 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  // 插件
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': "jquery"
    })
  ],
}

• 参数配置目录：my-project/config/
  这里仅列出index.js中部分代码

const path = require('path')

module.exports = {
  // 开发环境下配置
  dev: {
    // 路径
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}, // 代理

    // 各种开发服务器设置
    host: 'localhost', // 可以自行更改，会被process.env.HOST覆盖
    port: 8080, // 可以自行修改，会被process.env.PORT覆盖，如果正在使用端口，则将确定一个空闲端口
    autoOpenBrowser: false, //运行时是否自动打开浏览器

    // cheap-module-eval-source-map:显示原始代码，方便开发时调试
    devtool: 'cheap-module-eval-source-map',

    //如果您在devtools中调试vue文件时遇到问题，将其设置为false 可能会有所帮助
    cacheBusting: true,
    cssSourceMap: true
  },
  // 生产环境下配置
  build: {
    // 打包成生产环境下的静态 index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // 打包到哪个目录下
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // source-map，inline-source-map会暴露源码
    devtool: 'none',
  }
}

vue-cli3.x

在根目录新建一个vue.config.js

const webpack = require("webpack")
module.exports = {
  //类似output.path，打包时生成的生产环境构建文件的目录，默认为'dist'
  outputDir: "你想要的目录",
  // 类似output.publicPath，打包后index.html静态资源引用路径，默认为'/'
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // 放置生成的静态资源(js、 css、 img、 fonts) 的(相对于 outputDir 的) 目录
  assetsDir: 'static',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap:false,
  configureWebpack: {
    resolve: {
      // 配置别名
      alias: {
        'jquery': 'jquery',
        'static': 'public/static'
      }
    },
    // 插件
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        'window.jQuery': "jquery"
      })
    ],
  },
  // 开发环境下
  devServer: {
    // 设置代理
    proxy: {
      "/api": {
        target: "https://api.xxx.xxx", // 域名
        ws: true, // 是否启用websockets
        // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，
        // 这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
};

我的个人博客

https://www.wangyanan.online