webstorm创建vue项⽬
⽂章⽬录
⼀. 新建项⽬步骤
创建vue-cli项⽬步骤：
其中改⽤npm install --global @vue/cli
@vue/cli v4官⽅中⽂⽂档:
离线创建项⽬步骤：
1. 我已经把github复制到gitee上，下载下来项⽬速度会很快gitee/wangwei135/vue-cli-templates.git
2. 复制项⽬下来之后整个⽂件夹复制到C:\Users\username\.vue-templates并重命名为webpack，
3. 然后cmd中输⼊vue init <template-name> <project-name> --offline，也就是vue init webpack project --offline, 之后会⾃动创建project⽂件夹
4. ⾸先打开App.vue，删除那⼀⾏代码margin-top: 60px;
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/  // 这⼀⾏代码删除掉，或者注释掉
}
git基本操作
4. gitee创建⼀个supermalll的仓库，复制提交地址gitee/username/projectName.git
5. 控制台中输⼊
git init
git status
git add .
git commit -m "第⼀次初始化"
git remote add origin gitee/username/projectName.git
git push -u origin master
推送到云端报错的解决⽅法： wwwblogs/xiyin/p/7625293.html
还有⼀种简易的⽅法：先下载gitee仓库的空⽩代码，然后复制.git⽂件夹替换到项⽬中，再推送。
项⽬结构
设置别名alis
设置完之后还需要重启项⽬。
默认@表⽰src
⼆.使⽤element UI库
使⽤⽅法：安装 npm i element-ui -S
然后main.js中写⼊代码
// 引⼊el ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
然后就可以直接使⽤了，例如在index.vue中写<el-button>Let's do it</el-button>就出现⼀个按钮。更多组件见官⽹：
⼆.使⽤移动端UI库-Mint UI
官⽹地址：
使⽤⽅法：安装npm install mint-ui -S
然后main.js写⼊
// 引⼊全部组件
// 引⼊mint-ui全部组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
三.安装使⽤scss
scss是sass的⾼级版
安装教程: blog.csdn/zhouzuoluo/article/details/81010331
报错解决⽅法: wwwblogs/blucesun/p/11463426.html
我的操作:
# 版本8可能会报错
cnpm install sass-loader@7.3.1 --save-dev
cnpm install node-sass --sava-dev
然后配置 build/webpack.base.js中的module, rules下⾯添加:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
最后使⽤:
<style scoped lang="scss">
$color:red;
div {
color:$color;
}
重新 npm run dev即可
vue插槽
插槽slot只是被⽤来替换的，⽂本会覆盖掉⼀些属性，所以⽂本的slot外最好套⼀层div，例如
<!--  class为active的绑定值isActive-->
<div :class="{active:isActive}"><slot  name="slot-item-text"></slot></div>
⽽不是<slot :class="{active:isActive}" name="slot-item-text"></slot>
四.vue安装与使⽤路由router
1. npm install vue-router --save --save表⽰运⾏时依赖
2. 根⽬录下新建⽂件夹router，router⾥⾯新建index.js，写⼊
import Vue from 'vue'
import Router from 'vue-router'
// 定义跳转页⾯的组件
const Home = () => import('../pages/home/Home')
const Cart = () => import('../pages/cart/Cart')
const Category = ()=> import('../pages/category/Category')
const Profile = ()=> import('../pages/profile/Profile')
/
/ 1. 安装插件
Vue.use(Router)
// 3.导出router
export default new Router({
// 2. 创建路由
routes: [
{
// 定义默认跳转的页⾯
path: '/',
redirect: '/home'
},{
/
/ 挨个设置页⾯调整的组件
path:'/home',
component:Home
},{
path: '/cart',
component:Cart
},{
path: '/category',
component:Category
},{
path: '/profile',
component:Profile
}
],
// 默认使⽤hash模式，改⽤history模式
mode:'history'
})
3. src下⾯main.js添加
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in f with an alias. import Vue from 'vue'
import App from './App'
import router from './router'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4. pages下⾯创建多个*.vue，并在index.js中配置映射关系，见2
5. App.vue中插⼊<router-view></router-view> 作为跳转的视图
6. 写点击函数跳转，并改⽤history模式跳转
itemClick(){
console.log("点击了，正在跳转页⾯");
// this.$place('/home');
// this.$router.push(this.path) // 点击相同页⾯就会报错
// 点击相同页⾯就不会报错了
this.$router.push(this.path).catch(err=>err);
}
7. 判断当前的是哪个页⾯
if(this.$route.path.indexOf(this.path)>0) {
return true;
} else {
return false;
}
// $route表⽰当前点击的页⾯,$router表⽰全局路由，⼆者不⼀样
更多官⽅⽂档：
七. 使⽤axios
1. npm install --save axios 然后node_module中多了axios这个⽂件夹
2. 然后src下⾯新建api⽂件夹,⾥⾯新建ajax.js, 并写⼊import axios from 'axios'即可使⽤axios了。
若浏览器报错No 'Access-Control-Allow-Origin' header is present on the requested resource.需要解决浏览器跨域操作：配置 config/ index.js 的dev下⾯:
// config/index.js的dev下⾯
// 解决跨域url请求
proxyTable: {
'/api': {
target: 'localhost:80',//后端接⼝地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '',  //重写, 以后调⽤时，必须调⽤时要⽤api/Test/xxx.php,⽽不是http开头的⽹址
}
}
},
然后重启npm run dev, 前端跨域只针对开发模式, ⽣成模式不⽣效.
axios基本例⼦
php后台post情况:
Headers中Content-Type为 multipart/form-data 的数据,
vuejson转对象或者 application/x-www-form-urlencoded 的数据, 请使⽤:
$username = $_POST['username'];
接收application/json 的数据，请使⽤:
如下就可以接收 application/json,  postman中body改为raw的⽅式提交
$data = file_get_contents('php://input');
$data = json_decode($data);  // json字符串转为json对象，对象只能使⽤->访问，数组可以使⽤['username']访问$username = $data->username;
$password = $data->password;
axios综合get与post请求

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。