vue合家福实例(1)：vue-cli3创建项目并调整为多入口项

这一系列文章的源码

vue-cli3是VUE的开发工具。功能强大，还能图形化创建项目。创建项目后已经对项目的配置、命令等作出一些默认的工作。页面项目比之cli2简洁许多，支持了多页面的配置。
我用的是npm。我这里的实例项目中都是采用npm，其它如yarn应该也是差不多吧。没去体验过。不是采用npm构建的朋友就作为参与吧。

安装

如果全局安装过旧版本的，官方要求先卸载旧版本的cli

npm uninstall vue-cli -g

官方推荐node.js的版本在8.11.0以上
安装vue-cli

npm install -g @vue/cli

安装完成后，可以使用命令检查其版本是否正确 (3.x)

vue --version

创建项目

安装完成成，开始创建项目。

1. 进入项目目录，以下命令创建项目

vue create vuedemo

创建命令
默认
创建项目中……
创建完成

2. 进入项目根目录

cd vuedemo

3. 启动项目

npm run serve

项目启动完成

4. 浏览

   
   浏览
5. 完成
   项目创建完成，默认端口8080

项目结构

项目结构

cli创建的目录如图。包括了node_modules、public、src三个文件夹和5个文件。比起cli2，这个实在是简洁得很。当然，cli2中该有的能力这里也都是有的。node_modules文件夹我们不必操心。都是依赖包。开发过程忽视它便是。public文件夹下的文件/文件夹会作为静态资源拷贝到发布目录，这个目录中的可以认为是根目录访问。
开发的代码都放到src目录中。结构可自行调整。此目录中的文件会被webpack打包。

src中目录调整

先规划好src中的目录。我们这是一个多入口应用程序。

调整后的结构

assets：放置静态资源，如图片，css
components：公共组件、模块
project：项目，里面每个文件夹为一个入口，即一个子应用
request：数据请求，向服务器的请求都放在这个目录中

安装router、vuex

vue add router
vue add vuex

安装完成后的目录，目录结构会自动变化

新目录结构
界面变化

点击Home/About会有路由切换效果

安装element-ui组件

element为vue cli 3准备了插件。执行命令

vue add element

element安装中

安装完成后，界面变成了如果图

element

项目中暂定的几个组件已经完成安装。接下去修改代码，完成项目初始化。

修改端口

vue cli 3的配置方法，是在根目录中新建名称为vue.config.js的文件。在文件中配置。
文件内容：

module.exports = {
  devServer: {
    port: 3000
  }
}

这样配置后，重启项目，端口号就改成了3000

修改后的端口号

配置多入口应用

多入口应用的配置比起老版本，可简单了。暂定3个入口，分别是登录、前台页面、后台页面。配置文件如下：

module.exports = {
  pages: {
    index: 'src/project/index/main.js',
    admin: 'src/project/admin/main.js',
    login: 'src/project/login/main.js'
  },
  devServer: {
    port: 3000
  }
}

还需要调整下前面的目录结构。

新目录结构

说明：把根目录中的views、main.js、router.js、store.js文件和文件夹分别复制一份到各子项目中。删除原文件。
修改App.vue文件如下：

<template>
  <div id="app">
    <img src="@/assets/logo.png">
    <router-link to="/">Home</router-link>/
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>
#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;
}
</style>

修改每个main.js中的文件路径如下：

import Vue from 'vue'
import App from '@/components/App.vue'
import router from './router'
import store from './store'
import '../../plugins/element.js'

Vue.config.productionTip = false

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

修改Home.vue

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div>
    <HelloWorld msg="这是admin项目的Home页面"/>
  </div>
</template>

修改About.vue

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div>
    <HelloWorld msg="这是admin项目的About页面"/>
  </div>
</template>

三个入口页面效果

index
login
admin