码迷,mamicode.com
首页 > 其他好文 > 详细

vue多页面项目搭建(vue-cli 4.0)

时间:2019-12-02 13:27:20      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:路由   router   mamicode   选中   lse   技术   vuex   isp   安装完成   

1、创建vue项目

cmd命令执行

    

vue create app (app 自定义的项目名)

技术图片 

一般都会选择后者,自己配置一下自己需要的选项(空格为选中)

技术图片

 

 

 这是我个人需要的一些选项,路由Router、状态管理Vuex、CSS处理器等(可以根据自己需要进行选择)

技术图片

 

 

 这里选择yes(Y)

技术图片

 

 

 我这里选用sass

技术图片

 

 

 打开ESLint和常规的一些

技术图片

技术图片

技术图片

 

 

 静静等待安装完成就可以了!

2、运行项目并配置多页面

cd app 
yarn serve /npm run serve

 技术图片

 

 

 一般生成的都是8080端口的,由于本地已经在跑一个8080端口的服务,所以默认打开了8081端口

        1、在根目录下创建一个vue.config.js设置入口配置

module.exports = {
  pages: {
    about: {
      entry: ‘src/pages/about/main.js‘,
      template: ‘public/about.html‘,
      filename: ‘about.html‘
    },
    index: {
      entry: ‘src/pages/home/main.js‘,
      template: ‘public/index.html‘,
      filename: ‘index.html‘
    }
  }
}

  2、创建文件和移除原文件

  移除根目录下的main.js和App.vue

  在public下我新建了两个html(index.html和about.html)

  在src下新建pages文件夹其下新建了home、about文件夹

  并且分别在home和about下面新建main.js和App.vue

  技术图片

  当然也可以把路由放在该目录下。

 App.vue

<template>
  <div id="home">
    Home
  </div>
</template>
<script>
export default {
  name: ‘Home‘
}
</script>

main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘
import store from ‘./store‘

Vue.config.productionTip = false

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

3、重启一下项目

技术图片

 

 技术图片

 

 这样就完成了多页面的vue项目搭建!

 

 

 

vue多页面项目搭建(vue-cli 4.0)

标签:路由   router   mamicode   选中   lse   技术   vuex   isp   安装完成   

原文地址:https://www.cnblogs.com/zaijin-yang/p/11969881.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!