一. 开发环境

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;

Vue-cli项目搭建相关推荐

快速简洁的Vue+Electron项目搭建教程
Vue+Electron项目搭建教程最近写一个项目,需要使用Electron集成Vue,特此记录搭建过程 Vue+Electron 常用搭建方式在之前,通常我们会使用electron-vue脚手架 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
Vue+element 项目搭建
文章目录前言环境 vue -cli 项目创建改造一改造二改造三测试使用 elementui 安装 loader 测试总结前言最近有点小动作了,有两个项目需要推进,要把前端的玩意捡起 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
vue脚手架项目搭建以及常见命令
1.安装vue2脚手架: (1)在cmd命令行中输入脚手架安装命令: (2)全局安装vue脚手架:npm install -g vue-cli 或者指定版本:npm i vue-cli@5.0.4 - ...
Vue CLI 3搭建
卸载旧版本 vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本. 卸载指令:npm uninsta ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...

Vue-cli项目搭建

一. 开发环境

1. 安装node.js

2. 配置环境变量

3. 安装 cnpm

4. 安装 vue-cli

二. 开发流程

1. 创建项目

2. 运行项目

3. 兼容IE浏览器

4. 去除 Eslint 校验

5. 配置后台服务环境

6. 打包项目

三. 开发插件

0. 插件引入方式

1. Jquery

2. ElementUI

3. Axios

4. Vuex

5. scss 和 less

6. vue-layer

7. px2rem-loader

8. postcss-px2rem-exclude

9. zepto

Vue-cli项目搭建相关推荐

最新文章

热门文章