vue项目的配置和创建

项目创建

1，安装Node.js v10+
先从vsc的终端和Git Bash Here上面查找有没有安 装node.js和npm

node -v
npm -v

• 安装git，可以使用 git bash命令行工具
• 安装cnpm：

  npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装脚手架：

  cnpm install @vue/cli -g

• 创建项目：

  vue create vue-study

安装Asios

可以用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

安装

$ cnpm install axios

- 启动项目：

进入项目目录，执行 npm run serve，启动一个本地开发服务器

提示：下载代码时，不需要下载node_modules包，自己执行 cnpm install即可安装它们。

环境说明

• babel 是js编辑器
• eslint 是一个代码检测工具，它的目标把当前程序中不规范的代码找出来、报错，让你纠正。

路由

单页面应用程序 vs. 多页面应用程序
单页面应用程序，实际是通过路由对组件进行管理的，URL发生变化，组件切换，就形成了视觉上页面切换。
实际上，在单页面应用程序中，只有一个index.html页面，其它一切皆组件。

1、如何安装集成路由？

(1)安装vue-router

cnpm install vue-router -S

(2)在src根目录创建 router.js文件，编码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from './views/Home.vue'

const router = new VueRouter({
    routes: [
        { path: '/home', component: Home }
    ]
})
export default router

`
(3)在main.js中进行挂载

import router from './router.js'
new Vue({
    router,
    render: h=>h(App)
}).$mount('#app')

修改端口

在根目录创建一个名叫 ’ vue.config.js ’

module.exports = {
    devServer: {
        port: '8090'
    }
}

配置package.json文件

在根目录找到package.json文件在里面找到 ‘scripts’ 对象

"serve": "vue-cli-service serve --open", //可以执行完成后不用输入地址，自行打开网页

"start": "npm run serve"  //这是一个偷懒的方法  把运行的指令配置成这样只要输入  npm start 就可以运行  在项目很多的情况下可以用这个 不用去记录很多的运行指令

配置代理

新建 vue.config.js 修改端口 和 设置跨域的代理

module.exports = {
    devServer: {
        port: '8090',      
        //跨越代理
        proxy: {
            '/jd': {
              target: 'http://10.36.135.29:9999',  //获取数据的接口
              ws: true,
              changeOrigin: true
            },
        }
    }
}

Vuex状态管理

1、简介

状态：数据。状态管理，数据管理。
Vue - React
Vuex - Flux

作用：1、实现组件之间的数据共享  2、用于缓存

2、安装

cnpm install vuex -S

新建src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({})
export defaut store

在main.js中进行挂载：
import store from '@/store/'
new Vue({
    store
}).$mount('#app')
在页面组件中，可以使用 this.$store.state / this.$store.commit()

安装sass

cnpm install sass-loader -D
cnpm install sass -D   （node-sass）

<style lang='scss' scoped>
</style>

安装Vant

Vant，是一个专注于移动的Vue UI组件库

cnpm install vant -S
cnpm install babel-plugin-import -D

配置babel.config.js

//配置
plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
]

重启项目

在组件上，使用vant的组件：

//使用组件
import { Button } from 'vant'
{
    components: {
        [Button.name]: Button
    }
}

Element安装

cnpm i element-ui -S

引入cdn

<!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 

<!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>