Vue-cli项目搭建

最新推荐文章于 2025-05-20 17:51:25 发布

前端小羊村

最新推荐文章于 2025-05-20 17:51:25 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/yuhuo9/article/details/84303235

Web前端专栏收录该内容

6 篇文章

订阅专栏

一. 开发环境

1. 安装node.js

下载安装包，进行安装，默认npm也会一起安装
http://nodejs.cn/download/

2. 配置环境变量

(1) 设置npm的全局模块的存放路径，缓存路径

npm config set prefix "D:\Software\nodejs\node_global"
npm config set cache "D:\Software\nodejs\node_cache"

(2) 设置环境变量

NODE_PATH = "D:\Software\nodejs\node_global"
Path = "D:\Software\nodejs\node_global"

3. 安装 cnpm

//安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
//配置淘宝镜像(不知道之前为啥不用这一操作，有时间再细究)
npm config set registry https://registry.npm.taobao.org
//查看淘宝镜像
npm config get registry

4. 安装 vue-cli

cnpm install -g vue-cli

二. 开发流程

1. 创建项目

(1) 项目名全小写；
(2) 进入工作空间目录，执行以下：

vue init webpack 项目名

2. 运行项目

(1) 设置ip地址和端口号：修改 config / index.js：

module.exports = {
  dev: {
	...
    host: '0.0.0.0', 
    port: 8080,

(2) 进入项目目录（后续所有cmd操作都在项目目录下），执行：

cnpm run dev

(3) 通过设置的ip和端口访问项目，如 http://10.1.32.96:8080

3. 兼容IE浏览器

(1) vue要求必须 IE9 及以上版本
(2) 进入项目目录，执行以下：

cnpm install --save-dev babel-polyfill

(3) 修改 build / webpack.base.conf.js

module.exports = {
  ...
  entry: {
	...
    app: ["babel-polyfill", "./src/main.js"]
  },

(4) 在 src / main.js 中引入

import 'babel-polyfill'

4. 去除 Eslint 校验

(1) 修改 build / webpack.base.conf.js

module.exports = {
  ...
  module: {
    rules: [
      ...(config.dev.useEslint ? [] : []),

5. 配置后台服务环境

(1) 进入项目目录，执行以下：

cnpm install --save-dev cross-env

(2) 定义打包命令，修改 package.json

"scripts" : {
	...
	"build": "cross-env type=dev node build/build.js",
    "build:dev": "cross-env type=dev node build/build.js",
    "build:prod": "cross-env type=prod node build/build.js",
    "build:test": "cross-env type=test node build/build.js",
}

(3) 设置环境配置，修改 config/dev.env.js，config/pro.evn.js等文件

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_URL: '"http://xeyserver.dev.vtron.com/alphakids/"'
})

(4) 设置打包命令和环境配置文件的的映射，修改 build/webpack.prod.conf.js

const env = require('../config/'+ process.env.type +'.env')

(5) 设置打包时控制台提示语（非必要），修改 build/build.js

const spinner = ora('building for ' + process.env.type + ' mode ...')

(6) 代码中使用环境配置参数

window.config = {
	baseUrl : process.env.API_URL,  //后台服务地址
	debug : (process.env.NODE_ENV=="development") //只有开发环境下开启debug模式
};

6. 打包项目

(1) 设置资源引用路径，设置报错时不暴露源码：修改 config / index.js：

module.exports = {
  dev: {
	...
  },
  build: {
    ...
    assetsPublicPath: './',
    productionSourceMap: false,

(2) 设置图片引用路径：修改 build / utils.js：

exports.cssLoaders = function (options) {
	...
	function generateLoaders(..) {
		...
		return ExtractTextPlugin.extract({
	        use: loaders,
	        fallback: 'vue-style-loader',
	        publicPath : '../../'
	    })
	}

}

(3) 生成代码，在 dist 文件夹中生成 index.html 和 static 文件夹，保持在同一目录下， index.html 即为项目入口

cnpm run build

三. 开发插件

0. 插件引入方式

(1) npm方式，下载到本地，跟着项目一起打包

cnpm install 插件名 --save

(2) cdn方式，引用第三方链接（https://www.bootcdn.cn/）
在index.html中引入

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

修改 build/webpack.base.conf.js

module.exports = {
 	...
	externals: {
		'vue': 'Vue',
		'vue-router': 'VueRouter',
		'vuex': 'Vuex',
		'axios': 'axios',
		'jquery': 'jQuery',
		'animate': 'animate'
	}

注：element-ui设计到改主题色，cdn方式太麻烦，直接用npm方式。除此之外，其他插件可用cdn则用cdn，初次加载速度更快

1. Jquery

(1) 安装

cnpm install jquery --save

(2) 引入：修改 src / main.js

import jquery from 'jquery'
window.$ = jquery;
window.jQuery = jquery;

2. ElementUI

(1) 安装

cnpm install element-ui --save

(2) 重设主题颜色：新建 css / element-variables.scss 文件

/* 改变主题色变量 */
$--color-primary: #3bb2b8;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

(3) 引入：修改 src / main.js

import elementUI from 'element-ui'
import './css/element-variables.scss'
Vue.use(elementUI);

3. Axios

(1) 安装

cnpm install axios --save

(2) 配置统一请求拦截：新建 js / axios.js 文件

import axios from 'axios';

axios.defaults.baseURL = "http://10.1.32.44/8023/";
axios.defaults.timeout = 5000;
axios.defaults.withCredentials = true; //携带cookie信息,保持session的一致性
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//request 拦截器
axios.interceptors.request.use(
    config => {
    	...
    	return config;
    },
    error => {
    	...
    	return Promise.reject("系统错误");
    }
);
//response 拦截器
axios.interceptors.response.use(
    response => {
    		...
    		return response.data;
    },
    error => {
    	...
        return Promise.reject(系统错误);
    }
)

window.axios = axios;

(3) 引入：修改 src / main.js

import './js/axios.js'

4. Vuex

(1) 安装

cnpm install vuex --save

(2) 配置 store：新建 store / index.js 和 store / moduleA.js 文件

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
//引入分流模块
import moduleA from "./moduleA.js";

export default new Vuex.Store({
	state:{
        xx: "xx"
   	},
   	modules : {
   		moduleA  : moduleA 
   	}
});

export default {
    state:{
        xx : "xx"
    }
}

(3) 引入：修改 src / main.js

import store from './store/index.js'
...
new Vue({
	el: '#app',
	router,
	store,
	components: { App },
	template: '<App/>'
})

5. scss 和 less

(1) 安装

npm  install sass-loader --save-dev
npm install node-sass --sava-dev
npm install less less-loader --save-dev

6. vue-layer

(1) 安装

cnpm install vue-layer --save

(2) 引入：修改 src / main.js

import layer from 'vue-layer'
window.layer = layer(Vue);

(3) 说明：功能没有原版layer强大，且elementUI本身提供的弹窗也很好用，因此项目中没用到

7. px2rem-loader

(1) 安装

npm install px2rem-loader --save -dev

(2) 配置：修改 build / utils.js

exports.cssLoaders = function (options) {
	...
	const px2remLoader = {
	  loader: 'px2rem-loader',
	  options: {
	    remUnit: 100	// 将代码中px转rem,转换比例:1rem=100px (不转换元素内嵌样式)
	  }
	};
	 function generateLoaders (loader, loaderOptions) {
	    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
		...
	}
}

8. postcss-px2rem-exclude

(1) 说明：上面的px2rem-loader插件不能自定义过滤掉不转的文件夹
(2) 安装

npm install postcss-px2rem-exclude --save -dev

(3) 配置：修改 .postcssrc.js

module.exports = {
  "plugins": {
    ...
    "postcss-px2rem-exclude": {
        "remUnit": 10,
        "exclude": /static/
      }
  }
};

9. zepto

(1) 说明：移动端js框架，与Jquery类似
(2) 安装

cnpm install script-loader exports-loader --save -dev 
cnpm install zepto --save

(3) 配置：修改 build / webpack.base.conf.js

module.exports = {
   ...
  "module": {
    "rules": [
        {
		    test: require.resolve('zepto'),
		    loader: 'exports-loader?window.Zepto!script-loader'
		},
		...
     ]
  }
};

(4) 引入：修改 src / main.js

//其实不引人也无妨，因为zepto已经自动挂载到$和Zepto全局变量中
import zepto from 'zepto'
window.$ = zepto;
window.Zepto = zepto;