Vue-cli项目搭建

一. 开发环境

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;
内容概要:本书《Deep Reinforcement Learning with Guaranteed Performance》探讨了基于李雅普诺夫方法的深度强化学习及其在非线性系统最优控制中的应用。书中提出了一种近似最优自适应控制方法,结合泰勒展开、神经网络、估计器设计及滑模控制思想,解决了不同场景下的跟踪控制问题。该方法不仅保证了性能指标的渐近收敛,还确保了跟踪误差的渐近收敛至零。此外,书中还涉及了执行器饱和、冗余解析等问题,并提出了新的冗余解析方法,验证了所提方法的有效性和优越性。 适合人群:研究生及以上学历的研究人员,特别是从事自适应/最优控制、机器人学和动态神经网络领域的学术界和工业界研究人员。 使用场景及目标:①研究非线性系统的最优控制问题,特别是在存在输入约束和系统动力学的情况下;②解决带有参数不确定性的线性和非线性系统的跟踪控制问题;③探索基于李雅普诺夫方法的深度强化学习在非线性系统控制中的应用;④设计和验证针对冗余机械臂的新型冗余解析方法。 其他说明:本书分为七章,每章内容相对独立,便于读者理解。书中不仅提供了理论分析,还通过实际应用(如欠驱动船舶、冗余机械臂)验证了所提方法的有效性。此外,作者鼓励读者通过仿真和实验进一步验证书中提出的理论和技术。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值