建立vue專案

1.package.json

,「keywords」: ,

「author」: 「」,

「license」: 「isc」,

「devdependencies」: ,

「dependencies」:

}2…gitignore

.ds_store

node_modules

/dist

.env.local

.env.*.local

npm-debug.log*

yarn-debug.log*

yarn-error.log*

.idea

.vscode

*.suo

.ntvs

*.njsproj

*.sln

*.sw?

3…babelrc

4.webpack.base.js

const path = require(『path』)

const htmlwebpackplugin = require(『html-webpack-plugin』)

const = require(『clean-webpack-plugin』)

const copywebpackplugin = require(『copy-webpack-plugin』)

const webpack = require(『webpack』)

const vueloaderplugin = require(『vue-loader/lib/plugin』)

function resolve (dir)

// webpack的配置檔案遵循著commonjs規範

module.exports = ,

// 開啟監視模式, 此時執行webpack指令進行打包會監視檔案變化自動打包

// watch: true

plugins: [

new htmlwebpackplugin(),

new vueloaderplugin(),

new cleanwebpackplugin(),

// new copywebpackplugin([

// // ]),

new webpack.bannerplugin(『baobao666!』)

],module: ' at position 233: …loader'] }̲, ,

// ' at position 55: …'sass-loader'] }̲,c }},

' at position 22: …: 'url-loader' }̲,

},exclude: /node_modules/,

},

,  // ,
// // }
]

resolve:}}

4.1webpack.dev.js

const merge = require(『webpack-merge』)

const baseconfig = require(』./webpack.base.js』)

// 引入webpack

const webpack = require(『webpack』)

// webpack的配置檔案遵循著commonjs規範

module.exports = merge(baseconfig, }}

},devtool: 『cheap-module-eval-source-map』,

plugins: [

new webpack.defineplugin()]})

4.2webpack.prod.js

const merge = require(『webpack-merge』)

const baseconfig = require(』./webpack.base.js』)

const webpack = require(『webpack』)

module.exports = merge(baseconfig,)]})

import elementui from 『element-ui』;

import 『element-ui/lib/theme-chalk/index.css』;

vue.use(elementui);

import router from 『@/router/index』

import store from 『@/store/index.js』

6.axios.js

let host = 『

if (!is_dev)

let baseurl = host +』/api/private/v1/』

// 匯入axios

import axios from 『axios』

// 匯入路由

import router from 『…/router/index』

// 彈框

import vue from 『vue』

// 建立副本

export const manageraxios = axios.create()

// 新增axios*** 攔截請求和響應

// 新增請求***

manageraxios.interceptors.request.use(

function(config) ,

function(error)

)// 新增響應***

manageraxios.interceptors.response.use(

function(response)

return response

},function(error)

)7.router.js

import vue from 『vue』

import vuerouter from 『vue-router』

import foo from 『@/layout/foo.vue』

import bar from 『@/layout/bar.vue』

import index from 『@/layout/index.vue』

import login from 『@/layout/login.vue』

const routes = [

},},]},

}]vue.use(vuerouter)

const router = new vuerouter()

// 增加導航守衛

router.beforeeach((to, from, next) => else else }})

export default router

vue 建立vue專案

在程式開發中，有三種方式建立vue專案，本地引入vuejs 使用cdn引入vuejs 使用vue cli建立vue專案。其中vue cli可以結合webpack打包工具使用，大大方便了開發步驟，使用廣泛。在用 vue 構建大型應用時推薦使用 npm 安裝 1 npm 能很好地和諸如 webpack ...

建立vue專案

總結官方的建立vue專案 1.安裝vue.js執行環境nodejs，可用 映象安裝，會比較快，建議安裝c盤，安裝成全域性的。命令是 npm install g cnpm registry 2.檢視安裝的版本，命令是 cnpm v3.安裝全域性腳手架，命令是 cnpm install g vue cl...

建立vue專案

1.按 windous鍵 r 輸入 cmd 開啟黑框框 2.檢查是否安裝npm，執行如下 npm v如果顯示的是版本號，則已經安裝，執行第三步 如果沒有顯示版本號，則需安裝npm npm install npm build npm run dev3.檢查是否安裝vue cli3，執行如下 npm v...