VUE书城-初始化项目

一、全局安装vue-cli

先全局安装vue-cli：

npm install vue-cli -g

初始化一个vue的项目

vue init webpack vue-book

? Project name vue-book
? Project description A Vue.js project
? Author xxx
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

启动

cd vue-book
npm run dev

目录结构

使用的vue-cli的版本为@2.9.6。

使用的vue的版本为2.5.2。

二、常用知识解读

1、@

import HelloWorld from '@/components/HelloWorld'

在build/webpack.base.conf.js中配置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),    // @指的是src目录
    }
  },

2、config/index.js

port: 8080,    // 启动项目的端口，可以更改
autoOpenBrowser: false,    // 自动打开浏览器

3、只关心src目录下的东西

扫描二维码关注公众号，回复： 5400984 查看本文章

assets目录，放的是一些静态资源，比如图片

三、项目改造

1、删除HelloWorld.vue，然后改造router/index.js

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

Vue.use(Router)

export default new Router({
  routes: [

  ]
})

改造App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

四、建立自己的项目目录

1、如果项目用到less 或者 scss

安装less

npm install less less-loader

安装scss

npm i node-sass sass-loader scss-loader --save-dev

打开webpack.base.config.js在loaders里面加上

rules: [
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    }
]

在.vue文件中

<style lang="scss" type="text/css">
    @import url('common/css/reset.css');

    $vw_base: 375; 
    @function vw($px) {
        @return ($px / 375) * 100vw;
    }

    .main {
        display: flex;
        width: vw(50);
    }
</style>

2、安装常用的包

npm install axios vuex bootstrap

3、建立自己的项目目录

建立自己的项目目录

mock目录，        模拟数据
api目录，         代表的是所有的接口
base目录，        基础组件
components目录，  页面组件

五、配置路由

在src/components目录下，新建组件：

vue

在src/router/index.js 中进行配置：

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

// 引入组件
import Home from '../components/Home.vue'
import Collect from '../components/Collect.vue'
import Detail from '../components/Detail.vue'
import Add from '../components/Add.vue'
import List from '../components/List.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/home', component: Home},
    {path: '/collect', component: Collect},
    {path: '/add', component: Add},
    {path: '/detail', component: Detail},
    {path: '/list', component: List}
  ]
})

浏览器打开：

http://localhost:8080/#/home

就能顺利打开首页。

六、安装Mint-UI

1、使用mint-ui：

// 安装
# Vue 2.0
npm install mint-ui -S

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

// 按需引入部分组件
import {Cell, Checklist} from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

2、在 src/main.js进行配置：

import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
Vue.config.productionTip = false
/* eslint-disable */
var vm = new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})