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-cli
3.x
仍想用 vue-cli2.x
则需要重新安装依赖:
npm i -g @vue/cli-init
然后按照上面 vue-cli
2.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': '/'
}
},
}
}
};