第一步、建立Vue工程
打开Vue-cli
选择一个文件夹
在地址栏输入cmd，回车打开命令行
输入vue ui
在浏览器中打开 http://localhost:8000
打开vue项目管理器
创建新项目
点击导航栏中的创建
在下面的“在此创建新项目”
接着按照下面的操作一步一步走，就可以完成项目的创建了
最后的项目工程有这些文件
第二步、完善项目配置
1.不同环境配置
在项目目录下创建vue.config.js文件
并输入下面内容
module.exports = {
publicPath: "./",
feaweif
// 输出文件目录
outputDir: process.env.outputDir,
};
更多配置请看Vue的官方说明：https://cli.vuejs.org/zh/config/
2.分别为不同环境配置不同的变量
-
开发环境
在项目目录下创建".env"文件，并输入一下内容
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL= 'http://127.0.0.1:8099'
-
生产环境
在项目目录下创建".env.production"文件，并输入一下内容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL= 'https://4ilab.mycraipy.cn'
-
测试环境
在项目目录下创建".env.test"文件，并输入一下内容
NODE_ENV = 'production'
VUE_APP_MODE ='test'
VUE_APP_API_URL= 'http://4ilab.mycraipy.cn:8099'
outputDir = 'test'
3.添加测试环境和生产环境发布版本
修改项目目录下的package.json文件里的scripts为
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"buildtest":"vue-cli-service build --mode test",
"publish": "vue-cli-service build && vue-cli-service build --mode test"
},
第三步、发布项目
创建输出文件
使用脚本命令build，编译项目
编译完成没有错的话，是这样子的
这时候在项目的dist文件夹下就会有下面的一些文件
我们使用浏览器打开index.html就可以查看网页了。
真正用于生产环境注意将 js 文件夹下的 *.map文件删除。
使用nginx部署
server{
listen 80;
server_name 4ilab.mycraipy.cn;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/4ilab/dist;
}
主要在nginx配置文件中修改几项参数
1.listen 监听端口
2.server_name 访问的域名，没有域名可以使用IP地址代替
3.root 就是dist文件夹所在的路径
常用库
axios
1.安装axios
npm install --save axios vue-axios
2.在main.js中引入axios
import axios from "axios";
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
axios.defaults.baseURL = process.env.VUE_APP_API_URL;
3.常用操作
get请求示例
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post请求示例
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
更多操作请前往官方文档：http://www.axios-js.com/zh-cn/docs/
element-ui
1.安装element-ui
npm i element-ui -S
2.引入element-ui
a.完整引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
b.按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babel.config.js 修改为：
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
};
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
完整组件列表和引入方式（完整组件列表以 components.json 为准）
3.使用
参照官网的使用说明https://element.eleme.cn/#/zh-CN/component/installation
vue-router
1.安装
npm install vue-router
2.引入
新建router文件夹，并新建index.js，写入下面内容
import Vue from "vue";
import VueRouter from "vue-router";
import Index from "../views/index.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Index",
component: Index,
meta: {
title: "主页"
}
},
];
const router = new VueRouter({
routes
});
export default router;
在main.js中引入
import router from "./router";
new Vue({
router,
render: h => h(App)
}).$mount("#app");
