使用vue-cli3
(关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它。)
1、安装node
输入npm测试是否安装成功(npm-v查看node版本)
2、安装webpack
npm install webpack -g
3、安装Vue脚手架(vue-cli)
npm install -g @vue/cli (输入vue验证是否安装成功,vue --version检查其版本是否正确 (3.x))
4、找到项目工程文件夹
cd 文件夹目录
5、创建vue项目
(1).vue-cli3:
vue create vue-demo(文件名)
(2).Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
vue init webpack vue-demo(文件名)
6、安装项目依赖包
npm install (增加node_modules)[用npm,beacuse cnpm会缺失一些依赖库]
[卸载node_modules]:
npm install rimraf
rimraf node_modules
7、安装vue路由模块和网络请求模块
(1).vue-cli3:
vue add router
vue add vuex
(2).vue-cli2:
npm install vue-router vue-resource --save
8、运行vue项目
npm run dev
9、打包
npm run build
//==============================================================================
[1].vue项目命名规范:vue-vue(英文小写-英文小写)
[2].选择css:sass,less,stylus
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
[3].请求方式:axios
npm install axios --save
main.js引入:
import axios from 'axios'
Vue.prototype.$axios = axios
使用:
this.$axios({
method: 'get',
url: this.baseURL+'/api',
headers: {
'Content-Type': 'application/json'
},
params: this.qs.stringify({ //qs:get请求拼接
id: 1,
sign: 'hh',
})})
.then(response => {
console.log("返回数据",response);
})
.catch(error => {
console.log("错误",error)
});
[4].get请求将data转换成拼接形式:qs
npm install qs --save
main.js中引入:
import qs from 'qs'
Vue.prototype.qs = qs
[5].配置请求前缀:config->dev.env.js,prod.env.js
API_ROOT: '"http://192.168.1.0:8080"'
main.js中定义:
Vue.prototype.baseURL = process.env.API_ROOT;
[6].juqey
npm install jquery --save
build->webpack.base.conf.js配置:
var webpack = require("webpack")
在module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})]
main.js中引入:
import $ from 'jquery'
[7].ip地址访问:package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
[8].下拉刷新上拉加载可以用:vue-scroller
npm i vue-scroller -S
main.js中引入
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
页面:
<div style="position:relative">
<scroller
:on-refresh="refresh"
:on-infinite="infinite">
</scroller>
</div>
[9].复制粘贴板功能:vue-clipboard2
npm install --save vue-clipboard2
main.js中引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard);
页面:
<div>{{msg}}</div>
<div
v-clipboard:copy="msg"
v-clipboard:success="onCopy"//复制成功方法
v-clipboard:error="onError">复制电话</div>
</div>
[10].项目名称更改:package.json
name:''