从零开始搭建Vue项目环境

jiezi

5 年前

一安装 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 详解）

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.ProvidePlugin

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

jQuery: "jquery",
$: "jquery"

})

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
})
}

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…

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

从零开始搭建Vue项目环境

一 webpack.base.conf.js

二 webpack.dev.conf.js

三 webpack.prod.conf.js