从零开始搭建Vue项目环境

头像
亲爱的阿乾
    阅读 8 分钟

    一 安装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.npmmirror.com

    四 全局安装 webpack
    cnpm install webpack -g

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

    cnpm i express -g

    cnpm i -g http-server

    cnpm i -g gulp

    五 全局安装 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/r...

    或

    编辑 ~/.npmrc 文件 加入下面内容， registry = http://192.168.138.182:8081/r...

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

    npm install [package-name] --registry=http://192.168.138.182:8081/r...

    （参考网址：开发者页面(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

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

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

    vue-routerjavascriptwebpack
    亲爱的阿乾
    885 声望22 粉丝

    此时无能为力，此心随波逐流

    « 上一篇
    Vue项目常用 es6 语法
    下一篇 »
    渐进式的使用Vuex

    引用和评论

    推荐阅读
    头像
    markdown编写API文档

    亲爱的阿乾阅读 749

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新