vue初步项目搭建

 

一、搭建环境

二、搭建项目

三、安装插件

 

---

 

一、搭建环境

　　1.官网(https://nodejs.org/zh-cn/)下载安装node.js(推荐下载长期支持版)

　　2.Vue脚手架安装(vue-cli)

npm install vue-cli -g

　　检验安装：

vue --version

二、搭建项目

 

1. 创建vue项目

　　　　

vue init <模板名> 本地文件夹名称

 

　　　示例：

vue init webpack-simple newVue

　　模板：

　　simple 基本没用

　　webpack 可以使用(大型项目)

　　Eslint 检查代码规范，单元测试

　　webpack-simple 个人推荐使用, 没有代码检查

 

1. 安装依赖(node_modules)

　　　　在项目内运行

npm install

　　　    通过taobao镜像安装

cnpm install

1. 运行项目

npm run dev

三、安装插件

 

1. Vue路由

　　安装vue-router组件

cnpm  i  vue-router -S

　　在src/main.js引入

　　

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './assets/js/router.js'
new Vue({
  el: '#app',
  render: h => h(App),
  router,
})

　　在src/assets/js新建router.js

import VueRouter from 'vue-router'
export default new VueRouter({
　　routes:[
　　　　{
　　　　　　
　　　　}，
    ]
})

　　　　2.VueX

　　　　官方文档：https://vuex.vuejs.org/zh/guide/

　　　　

import Vuex from 'vuex'
Vue.use(Vuex)
import store from './assets/js/data.js'

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

　　　　在src/assets/js新建data.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
mutations: {
     
  }
})

注：

state放置的是数据 类似于之前的data  

state里的变量可以在组件中直接调用：this.$store.state.数据名字

mutations放置的是函数 类似于之前的methods

mutations里面的方法如果要使用state里面的数据需要传入state，再调用state里的数据，如example(state){state.数据名字}

 　　3.Font class引入矢量图标

　　　　下载矢量图标(iconfont阿里巴巴矢量图标库：https://www.iconfont.cn/)

　　　　将文件解压到项目/src/assets/iconfont

　　　　安装组件

cnpm install css-loader --save-dev
cnpm install style-loader --save-dev

　　　　配置webpack.config.js

    {
        test: /\.(jpg|png|eot|svg|ttf|woff|woff2|gif)$/,
        loader: 'file-loader',
        options: {
        name: '[name].[ext]?[hash]'
     }
},

　　　　在main.js中全局引入

import './assets/font/iconfont.css'

 

　　　　在组件中直接使用

<span class="iconfont 图标class"></span>

 

 

　　4.使用MintUI组件

　　(MintUI官网：https://mint-ui.github.io/#!/zh-cn)

　　在项目安装

npm install mint-ui -S

 

　　1)全局引入

　　　　在src/main.js引入全部组件

import Mint from 'mint-ui';

Vue.use(Mint);

import 'mint-ui/lib/style.css'

 

　　　　在组件中直接使用

　　　　　　<mt-swipe :auto="4000">

            <mt-swipe-item v-for="(item,index) in mtSwipe">

              <router-link :to="item.path">

                <img :src="item.src" alt="">

              </router-link>

            </mt-swipe-item>

          </mt-swipe>

 

　　2)按需引入

　　　　在所需的组件或直接在src/main.js中引入

import { Cell, Checklist } from 'mint-ui';

Vue.component(Cell.name, Cell);

Vue.component(Checklist.name, Checklist);