乐趣区

从零开始搭建Vue项目环境

一 安装 node.js
在搭建 vue 的开发环境之前,一定一定要先下载 node.js,vue 的运行是要依赖于 node 的 npm 的管理工具来实现,
node 可以在官网或者中文网里面下载,根据自己的电脑选择是 32 还是 64,
网址:http://nodejs.cn
全程傻瓜式安装。node.js 是自带 npm 的,npm 在后面安装别的环境需要用到。

二 检查 node / npm 版本
下载好 node 之后,打开 docs 管理工具,先看看 node 安装成功了没有,输入 node -v,回车,会输出 node 的版本号,

安装完后,我们可以通过在 terminal 中输入 node -v,npm -v 分别检查 node.js 和 npm 的版本

mac 这里需要注意!!要给 npm 安装目录访问权限,否则 npm 安装别的东西都会失败

sudo chmod -R 777 /usr/local/lib/node_modules/

三 全局安装 cnpm(淘宝镜像)
在 terminal 里输入(cmd 命令行)

npm install -g cnpm –registry=https://registry.npm.taobao.org

四 全局安装 webpack
cnpm install webpack -g

cnpm install webpack-dev-server -g (热更新)
在 terminal 中输入 webpack - v 检查是否安装成功以及查看版本号

五 全局安装 vue-cli
cnpm install vue-cli -g
在 terminal 中输入 vue -V(注意这里是大写 V)检查是否安装成功以及查看版本号

六 全局安装 node-sass
cnpm install node-sass -g

七 配置公司 npm 私服
npm config set registry http://192.168.138.182:8081/repository/cc-npm-group/

编辑 ~/.npmrc 文件 加入下面内容,registry = http://192.168.138.182:8081/repository/cc-npm-group/

注意:需要安装私服公共组件时,使用以下命令

npm install [package-name] –registry=http://192.168.138.182:8081/repository/cc-npm-group/

(参考网址:开发者页面(NPM))

八 开始建一个新项目
vue init webpack my-project

输入项目名称(your project name)
遇到 install vue-router? 输入 y
其余都是 n

继续输入 cd my-project
继续输入 cnpm install

最后启动 npm run dev

需要下载项目依赖 步骤如下:
1、ctrl+c
2、y
3、cnpm i element-ui –save
4、cnpm i axios –save
5、cnpm i jquery –save
6、cnpm i qs –save
7、cnpm i echarts –save

8、cnpm i vuex –save
9、cnpm i sass sass-loader –save-dev(或使用 cnpm i sass sass-loader -D)(sass 均为 css 预处理器,需要下载相应的 loader 来解析)

(-D, –save-dev 安装包信息将加入到 devDependencies 开发阶段的依赖,就是我们在开发过程中需要的依赖,只在开发阶段起作业的)
10、npm run dev

—————————————————————- 华丽的分割线 ———————————————————————————

                                   完成以上八步,就基本完成环境配置了,以下是项目中的具体使用方法。

—————————————————————- 华丽的分割线 ———————————————————————————

九 配置 webpack(参考 Vue-cli 中 webpack 详解)

一 webpack.base.conf.js

  1. resolve.alias 别名 / 重定向

可以简写文件引入路径,避免大量无用代码,并且增加代码可读性,可以省略扩展名如(’.js’, ‘.vue’, ‘.json’)
具体代码如下:
resolve: {
extensions: [‘.js’, ‘.vue’, ‘.json’],
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’,
‘src’: path.resolve(__dirname, ‘../src’),
‘assets’: path.resolve(__dirname, ‘../src/assets’),
‘components’: path.resolve(__dirname, ‘../src/components’),
‘css’: path.resolve(__dirname, ‘../src/assets/css’),
‘img’: path.resolve(__dirname, ‘../src/assets/images’),
‘js’: path.resolve(__dirname, ‘../src/assets/js’),
‘static’: path.resolve(__dirname, ‘../static/’),
‘views’: path.resolve(__dirname, ‘../src/views’),
‘router’: path.resolve(__dirname, ‘../src/routes’),
‘i18n’: path.resolve(__dirname, ‘./../src/i18n’)
}
},

二 webpack.dev.conf.js

  1. webpack.ProvidePlugin

webpack 配置 ProvidePlugin 后,在使用时将不再需要 import 和 require 进行引入,直接使用即可。
如 jquery echart lodash
具体代码如下:
new webpack.ProvidePlugin({

jQuery: "jquery",
$: "jquery"

})

三 webpack.prod.conf.js

  1. uglifyjs-webpack-plugin 用来对 js 文件进行压缩,从而减小 js 文件的大小,加速 load 速度。

1.1 pure_funcs — 默认为 null. 你可以传入一个名称的数组,而 UglifyJs 将会假定那些函数不会产生副作用. 危险: 如果名称在作用范围内被重新定义了就不会检查.
1.2 drop_debugger — 移除调试器和调试语句
1.3 warnings — 当去掉不可达代码或者没有被使用的声明等东西时,显示警告.
1.4 drop_console — 默认为 false. 传入 true 会丢弃对 console. 函数的调用.
1.4 sourceMap 设置 false 后可以禁止查看显示 Source Maps,并且 打包后的 dist 不再生成 **.map.js 从而大大缩减 size
具体代码如下:
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === ‘testing’ ?
‘index.html’ : config.build.index,
template: ‘index.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/htm…
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: ‘dependency’
}),
// 生产阶段 与 发布阶段 都需要配置该项
new webpack.ProvidePlugin({

  jQuery: "jquery",
  $: "jquery"

})
十 配置 babel
找到根目录 .babelrc 文件,将以下代码 复制粘贴
{
“presets”: [
[“env”]
],
“plugins”: [“syntax-dynamic-import”, “transform-vue-jsx”, “transform-runtime”, “transform-object-rest-spread”],
“comments”: false,
“env”: {
“test”: {
“presets”: [“env”, “stage-2”],
“plugins”: [“transform-vue-jsx”, “transform-es2015-modules-commonjs”, “dynamic-import-node”]
},
“development”: {
“plugins”: [“dynamic-import-node”]
},
“production”: {
“plugins”: [“transform-remove-console”]
}
}
}
babel 配置说明

{
"presets": [["env"]
],
// syntax-dynamic-import 主要解决动态引入模块的问题
// transform-vue-jsx Vue 中的渲染函数(render)可以支持 JSX 语法
// transform-runtime 为了解决这种全局对象或者全局对象方法编译不足的情况,但是它只会对 es6 的语法进行转换,而不会对新 api 进行转换。// 如果需要转换新 api,也可以通过使用 babel-polyfill 来规避兼容性问题。// transform-object-rest-spread 用于支持 对象的 spread 操作符 例如 ...mapState
"plugins": ["syntax-dynamic-import", "transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
"env": {
// test 是提前设置的环境变量,如果没有设置 BABEL_ENV 则使用 NODE_ENV,如果都没有设置默认就是 development
"test": {"presets": ["env", "stage-2"],
// transform-es2015-modules-commonjs 项目系统需要将 es6 模块转成 AMD 模块
// dynamic-import-node Babel 插件到 transpile import()的延迟 require(),用于 node
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
},
"development": {"plugins": ["dynamic-import-node"]
},
"production": {
// 移除 console
"plugins": ["transform-remove-console"]
}
}
}

(根据 terminal 报错,cnpm i [package-name] -D 下载相应的依赖包)

若复制的是以上代码,则需要在命令行输入 cnpm i babel-plugin-dynamic-import-node -D

十一 配置 axios(请求数据)

import axios from ‘axios’
import qs from ‘qs’
import {Message} from ‘element-ui’

const error = (prop) => {
Message.closeAll();
Message({
message: prop,
type: ‘error’,
duration: 2000
})
}

var instance = axios.create({
baseURL: ‘/mspapi’, // 加入全局 post 方法,默认统一请求路径(前后端约定)
method: ‘post’,
headers: {‘X-Requested-With’: ‘XMLHttpRequest’, ‘x-auth-token’: window.localStorage.getItem(“_token_”) } // post/get 请求头(前后端约定)
});
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’;
//POST 传参序列化
instance.interceptors.request.use(
(config) => {
config.data = qs.stringify(config.data, { arrayFormat: ‘brackets’});

if (config.url.indexOf(“/login/dologin”) !== -1) {
config.headers = {‘X-Requested-With’: ‘XMLHttpRequest’, ‘Content-Type’: ‘application/x-www-form-urlencoded;charset=UTF-8’}
} else {
config.headers = {‘X-Requested-With’: ‘XMLHttpRequest’, ‘Content-Type’: ‘application/x-www-form-urlencoded;charset=UTF-8’, ‘x-auth-token’: window.localStorage.getItem(“_token_”) }
}
return config
},
(error) => {
return Promise.reject(error)
}
)

// 添加返回拦截器

instance.interceptors.response.use((rsp) => {
return new Promise((resolve, reject) => {
// 处理登录状态
if (rsp.status === 203) {
rsp.data.code = 101008
} else {
if (rsp.headers[“x-auth-token”] && rsp.headers[“x-auth-token”] !== “”) {
window.localStorage.setItem(“_token_”, rsp.headers[“x-auth-token”])
}
}
// 若服务器返回特定的通用 code(大于 100100),则特殊处理;
// 若返回其他错误 code,都返回后处理
switch (rsp.data.code) {
case 101005:
case 101008:
window.localStorage.clear();
store.commit(“change_timeout”, true);
break;
case 101006:
window.localStorage.clear();
store.commit(“update_license”, true);
break;
case 101002:
case 101001:
window.localStorage.clear();
window.location.href = ‘/static/505.html’;
break;
default:
resolve(rsp.data)
break;
}
})
}, (err) => {
console.log(err.response)
if (err.response) {
error(‘ 服务器无响应,请联系系统管理员!’)
} else {
error(‘ 网络无连接,请检测网络设置!’)
}
});

const Post = (url, data) => {
return new Promise((resolve, reject) => {
data = data ? data : {};
instance.post(url, data)
.then(rsp => {
resolve(rsp);
})
.catch((error) => {
reject(error)
})
})
};

const Get = (url, data) => {
return new Promise((resolve, reject) => {
instance.get(url, data)
.then(rsp => {
resolve(rsp.data);
})
.catch((error) => {
reject(error)
})
})
}
export {Post, Get, axios}
十二 配置 main.js

import ‘babel-polyfill’ // 为了兼容 IE 浏览器
import Vue from ‘vue’
import Element from ‘element-ui’ // 项目引入 element-ui 库 https://element.eleme.cn/#/zh…
import VueRouter from ‘vue-router’ // 使用路由
import App from ‘./App’ // 使用路由
Vue.use(Element);
Vue.use(VueRouter);

import {Post} from ‘./tools/axios.js’
Vue.prototype.$bus = new Vue(); // 注册全局的 eventBus 用于非父子组件通讯
Vue.prototype.$post = Post; // 将封装好的 axios 赋值给 Vue 原型,这样全局都可以无障碍使用 该方法
import router from ‘./router/index’

new Vue({
el: ‘#app’,
router,
components: {App},
template: ‘<App/>’
})

十三 根据报错,进行下载具体的依赖包 以及 解决问题
如果按照以上十二步,还是有报错,建议直接删除 node-moudles 依赖包,执行 cnpm i 重新下载(下载过程中的 npm 报错,不予理会),

下载成功后,执行 npm run dev。

若仍有报错,根据 具体的报错,进行排查问题。

可以参考该网址,有许多关于报错的解决方案 https://juejin.im/post/59fa92…

在编写 Vue 文件时,可以参考官方文档的风格指南 https://cn.vuejs.org/v2/style…

UI 组件库,重点推荐 https://element.eleme.cn/#/zh…


感谢阅读,有问题可以在评论区留言。

退出移动版