Vue生成基础项目

比眉伴天荒 2023-05-31 06:42 36阅读 0赞

# vue 生成基础项目 #

安装node

# 下载安装，输出版本号，则正确安装
    http://nodejs.cn/download/
    node -v

安装vue-cli3

# 安装
    npm install -g @vue/cli
    vue -V  # 验证 我的是@vue/cli 4.0.5
    
    # 卸载
    npm uninstall -g @vue/cli
    
    # 更改npm源
    npm config set registry https://registry.npm.taobao.org
    # 切换到官方源
    npm config set registry http://www.npmjs.org
    # 查看源
    npm get registry

创建初始项目

vue ui
    
    创建项目 yarn进行包管理
    # 前提验证了yarn
    
    勾选上Babel Router Vuex 和使用配置文件，最后保存预设
    # 如果想删除预设，删除用户目录 .vuerc就行
    # 安装yarn命令 npm install -g yarn

手动创建`vue.config.js` 空文件
    在`src`同级创建`vue.config.js`，用于进行一些常规的配置。
    
    module.exports = {
        devServer:{
            port:3333,//服务端口号
            open:true //自动打开浏览器
       }
    }

启动服务

npm run serve

精简一下初始化后的代码

1.删除src里的 <div id="nav"> 部分，删除样式style的内容
    2.删除views里的 About.vue和Home.vue 
    3.删除router/index.js中的配置

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue' #开始就会加载
    
    Vue.use(VueRouter)
    
    const routes = [
      { 
        path: '/',
        name: 'home',
        component: Home
      },
      { 
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        # 属于懒加载，进入到页面才会加载
      }
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

`更改后`

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [
    
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router