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

创建项目

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

vue create vuedemo

创建命令

默认

创建项目中……

创建完成

cd vuedemo

启动项目

npm run serve

项目启动完成

浏览

浏览
完成
项目创建完成，默认端口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

admin

最后编辑于：2018.09.21 17:26:46