这里搭建的vue，只做一些配置与开发的细节，之后的写的内容，都以项目为主。能接触到vue的程序元，应该对html、css和js有一定的了解。就算不了解，也应该多学习学习基础知识，多上百度等搜索引擎查找问题的解决方案。更加具体的程序代码，这里就不再阐述。
一、快速搭建vue程序
再win下，使用cmd，当然使用window powershell也行，但是几次下来，发现window powershell 的效率非常慢，远不及cmd。
1.安装vue-cli环境
##安装最新版的vue-cli3
npm install -g @vue/cli
##查看版本是否正确
vue --version2.启动图形化界面
vue ui启动完成将会自动打开图形化管理界面，也可以复制cmd提示的地址再浏览器中打开
3.新建一个项目
vue项目管理器中，选择新建-路径-在此新建项目
输入项目名(MyVue)-下一步选择 默认(babel eslint)-创建项目
等待程序自动初始化完成后，我们的vue项目就搭建成功了
4.运行
进入新建的项目(MyVue)，左侧栏中选择任务-server-运行，完成后会在浏览器中自动打开，即可看到开发模式下的界面。也可以点击打开app打开。
5.打包上线
进入新建的项目(MyVue)，左侧栏中选择任务-build-运行，在项目路径下即可看到dist的文件，将里面的内容复制到网站相应的目录下，即完成上线。
这样我们的vue程序就能成功运行上线了
二、使用内置插件
在图形化管理界面，左侧栏中选择插件，即可看到已经安装的插件，点击右上角的安装插件，即可安装新插件，同时也推荐我们安装vue-route和vuex插件，我们点击安装。
安装完成，即可在MyVue/src下看到router/index.js文件，这个文件就是用来配置路由的，路由的写法可以参考文档，这里就不细说。
同样，安装好vuex后，MyVue/src下看到store/index.js文件，写法请参考文档。
三、使用jquery等js插件
大多数的前端开发者都会用到jquery，下面将介绍安装方式：
1.使用cnd安装。
安装jquery仅需在MyVue/puclic的目录下编辑index.html文件，将cnd代码复制到<head></head>中即可使用。
2.使用npm安装。
打开cmd，进入项目根目录，输入安装jquery
d:
cd www/MyVue
npm install jquery --save-dev然后在项目根目录下新建文件 vue.config.js，输入以下代码
// vue.config.js
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
},
}
测试，在src/views/Home.vue 中，在js代码的末尾输入测试代码
$(function(){
alert("jQuery run Ok!")
})运行完毕后弹出提示框 “jQuery run Ok!” 即安装成功。
四、引入elementui
npm安装
d:
cd www/MyVue
npm install element-ui --save-dev完成后编辑项目下src/main.js文件，添加以下代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
五、引入axios
1.使用cnd安装。
安装jquery仅需在MyVue/puclic的目录下编辑index.html文件，将cnd代码复制到<head></head>中即可使用。
2.npm安装
d:
cd www/MyVue
npm install vue-axios --save-dev完成后编辑项目下src/main.js文件，添加以下两行代码
// src/main.js
import axios from 'axios'
Vue.prototype.axios = axios;
使用方法
let url = "http://myvue.zhihu.com/myvue"
this.axios.get(url)
.then(respones => respones.data)
.then(data=>{
if(data.code > 0){
this.$message.error(data.msg)
}else{
window.console.log(data)
}
})
六、引入自定义文件
在src/assets下新建global.js文件
const YunServer = "http://myvue.zhihu.com/myvue"
export default {
YunServer
}
完成后编辑项目下src/main.js文件，添加以下代码
import global from './assets/js/global.js'
Vue.prototype.global = global
使用方法
console.log(this.global.YunServer)
到此，我们的vue+elementui+axios程序就基本搭建完成了，以上配置基本满足了大家的开发需求。在此提醒大家，尽管使用jquery开发很简单，但我们因尽量脱离jquery使用原生js代码开发，因为在后续的app开发中，是完全脱离jquery的。
下一章节：Magiclock：vue初学者-用nuxtjs做企业站开发
上一章节：Magiclock：vue初学者-从web到小程序到app
扫一扫
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
