介绍

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

命令安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确： vue --version

项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters.

`D:`打开cmd命令行输入盘符

`md ZhqCli` 创建文件夹

`cd ZhqCli` 打开文件夹

`vue create clidemo1` 创建项目

进入等待阶段

回车

启动服务 `npm run serve`

查看目录结构

新建router目录存放路由

新建store目录存放状态

新建wirwt目录存放页面

使用控制台安装包

刚开始打开着个编辑器 VScode 没有下面的控制面板

上边的导航栏 -->查看 --> 显示面板

点击加号添加

刚开始使用yarn的时候提示不是内部外部命令,也不是可运行的程序

先打开另一个cmd窗口命令行

添加插件npm install -g yarn

之后使用vscode安装我们需要的插件 vue-router 路由 vuex aixos服务

新建witwt目录下的`vue`文件夹

购物车cart.vue 商城 goodsList.vue

安装vant组件

移动端&小程序的组件库

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

配置按需引入后，将不允许直接导入所有组件

配置路由

router文件中新建index.js

import Vue from 'vue'
import Router from 'vue-router'

// 导入页面组件
import goodslist from '@/wirwt/goodslist.vue'
import cart from '@/wirwt/cart.vue'

//挂载路由
Vue.use(Router)

// 配置路由
const router = [
   {
       path: '/',
       name: 'goodslist',
       component: goodslist
   }, {
       path: '/',
       name: 'cart',
       component: cart
   }
]

// 导出  实例化一个router  使用routes
export default new Router({
   routes: router,
})

运行`npm run serve`

项目启动，报错this dependency was not found

导入挂载的模块不存在

在组件中新建 `goodsItem.vue`

页面中导入组件

使用vuex --项目大使用不然比较冗余

新建`store`文件夹

1.新建index.js文件

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import router from './router/index'
import store from './store/index'

import vant from 'Vant'
import 'vant/lib/index.css';

Vue.use(Vant)
Vue.config.productionTip=false

new Vue({
    router,
    store,
    render:h=> h(App),
}).$rount('#app')

2. 新建cart文件夹存放通用信息

1. index.js

import state from './state'
import getters from './getters'
// mutations同步操作,异步操作
import mutations from './mutations'
import actions from './actions'

    //命名空间     标准
export default{
    namespaced:true,
    state,
    mutations,
    actions,
    getters, 
}

2.state.js

前端数据库

export default{
    //购物车数据
    cart:[],
    // 商品数据
    goodsList:[],
}

3.mutation.js

获得商品数据的一个动作

import * as types from './types'


export default{
    [types.GET_GOODS_LIST](state,goods){

    }
}

4. types.js

不写也是没有关系的...

作为大项目定义一下

export const GET_GOODS_LIST='GET_GOODS_LIST'

区分同步数据异步数据 types会标明操作类型,操作方式通过大写定义一个常量值

mutation.js中添加

export default{
    [types.GET_GOODS_LIST](state,goods){
      /*add*/
        state.goodsList=goods
    }
}

5.action.js做异步操作

// 异步操作
import Axios from 'axios'

export default{

    async fetchGoods({commit}){
        //数据请求
        const response=await Axios.get('https://www.fastmock.site/mock/9e87721dd12ab3d9f81deb14e4c67212/cart/goods');
        commit [ 'GET_GOODS_LIST',response.data];//触发事件
    }
}

6. gettiing.js

export default{
    goodsList:state=>state.goodsList
}

goodslist.vue

<template>
    <div>
    <goods-item/>
    </div>
</template>
<script>
import goodsItem from '@/components/goodsItem.vue' 
import { mapGetters } from 'vuex'

export default {
    components:{
        goodsItem,
    },
    computed:mapGetters({
        goodsList:'cart/goodsList',
    })
}
</script>

<style>

</style>

vue-cli项目入手

介绍

D:打开cmd命令行 输入盘符

md ZhqCli 创建文件夹

cd ZhqCli 打开文件夹

vue create clidemo1 创建项目

启动服务 npm run serve