如何搭建vue3.0脚手架

我不是女神ヾ 2023-01-01 15:58 160阅读 0赞

**一 创建vue3.0脚手架**

1、如果已经安装过vue2.0，要先卸载vue2.0，没有安装过的话可以忽略这一步（也可以不卸载vue2.0，这样就可以创建不同版本的项目啦！）

npm uninstall vue-cli -g

2、安装vue3.0，注意：Node 版本升级至 8.9 及以上

npm install -g @vue/cli

3、vue3.0创建项目命令

vue create my-project

4、vue3创建的时候是木有路由的，要npm下载的

npm install --save vue-router

5、路由下载后要在 main.js 中引入

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

6、vue3.0运行命令

npm run serve

7、关闭vue3.0自带eslint语法校验功能

在vue.config.js文件进行配置，或在根目录下创建一个新文件，内容如下：

module.exports = { 
        lintOnSave: false
    }

创建vue3.0脚手架到这里就结束啦，下面的是个人做的小笔记

手动创建一个vue.config.js文件，与package.json在同一级目录下，里面包含基本的配置：①常用插件的配置，②端口号的配置，③跨域请求的配置等等

const path = require("path");
    const resolve = dir => path.join(__dirname, dir);
    // const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    const webpack = require("webpack");
     
    module.exports = { 
      // 项目部署的基本路径,默认假设你的应用将会部署在域名的根部,比如，https://www.vue-cli.com/
      // 如果你的应用是部署在一个子路径下，那么你需要在这里指定子路径，比如，
      // 如果你部署在 https://www.my-vue.com/my-app/; 那么将这个值改为 “/my-app/”
      publicPath: "/",
     
      // 将构建好的文件输出到哪里 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
      // 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
      outputDir: "dist",
     
      // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
      assetsDir: "static",
     
      // 是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在@vue/cli-plugin-eslint 被安装之后生效。
      // 设置为 true 时, eslint-loader 会将 lint 错误输出为编译警告。默认情况下， 
      // 警告仅仅会被输出到命令行，且不会使得编译失败。
      // 如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。
      // 这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。
      lintOnSave: true,
     
      // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 
      // template 选项了，但是这会让你的应用额外增加 10kb 左右。
      runtimeCompiler: false,
     
      // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式
      // 转译一个依赖，可以在这个选项中列出来。
      transpileDependencies: [],
     
      // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
      productionSourceMap: true,
     
      // 向 CSS 相关的 loader 传递选项
      css: { 
        /*为预处理器 loader 传递自定义选项*/
        loaderOptions: { 
          sass: { 
            prependData: `@import "@/assets/scss/_variable.scss";`,// 预设全局css变量
          },
          css: { 
            // 这里的选项会传递给 css-loader
          },
          postcss: { 
            // 这里的选项会传递给 postcss-loader
          }
        },
      },
     
      // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 
      // webpack 配置进行更细粒度的修改。
      chainWebpack: config => { 
        // 添加别名
        config.resolve.alias
          .set("@", resolve("src"))
          .set("assets", resolve("src/assets"))
          .set("components", resolve("src/components"))
          .set("utils", resolve("src/utils"))
          .set("api", resolve("src/api"));
      },
     
      // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于
      //一个内核时自动启用，仅作用于生产构建。
      parallel: require("os").cpus().length > 1,
     
      // 向 PWA 插件传递选项。
      // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
      pwa: { },
     
      // 所有 webpack-dev-server 的选项都支持。
    // 注意：有些值像 host、port 和 https 可能会被命令行参数覆写。
      // 有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
      // 代理配置
      devServer: { 
        host: "0.0.0.0",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true //配置自动启动浏览器 open: 'Google Chrome'-默认启动谷歌
        // proxy: 'http://localhost:9000' // 配置跨域处理,只有一个代理
     
        // 配置多个代理
        // proxy: { 
        // "/api": { 
        // target: "https://way.jd.com", //目标主机/接口域名
        // ws: true, //代理的WebSockets
        // changeOrigin: true, //需要虚拟主机站点/是否跨域
        // pathRewrite: { 
        // "^/api": ""
        // }
        // }
        // }
      },
     
      // 第三方插件选项
      // 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。
      pluginOptions: { }
    };

**二 vue3.0如何创建vue2.0项目**

1、安装vue2.0

npm install -g @vue/cli-init

vue2.0和vue3.0运行命令和创建项目命令是不一样，创建项目的时候区分开

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue脚手架搭建

vue2:脚手架搭建简介 vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是...

朱雀/ 2024年04月17日 05:42/ 0 赞/ 84 阅读

相关 VUE-脚手架搭建

文章目录一、概述二、前提准备 1. 安装 node-js 2. npm 镜像设置 3. 安装 vs-code

亦凉/ 2024年02月21日 09:31/ 0 赞/ 66 阅读

相关 vue脚手架搭建

vue脚手架搭建一、安装vue npm install vue -g 二、安装vue-router npm install vue-route

布满荆棘的人生/ 2023年03月01日 09:42/ 0 赞/ 221 阅读

相关 vue环境搭建--脚手架

概述最近由于项目的原因，在学习react的过程中抽出时间来学习一下vue，所以特此记录一些学习笔记，中间如果有一些问题的话欢迎大家指出。按理说react和vue的思

r囧r小猫/ 2023年01月13日 05:56/ 0 赞/ 214 阅读

相关如何搭建vue3.0脚手架

一创建vue3.0脚手架 1、如果已经安装过vue2.0，要先卸载vue2.0，没有安装过的话可以忽略这一步（也可以不卸载vue2.0，这样就可以创建不同版本的项目啦！）

我不是女神ヾ/ 2023年01月01日 15:58/ 0 赞/ 161 阅读

相关 vue脚手架搭建流程

> 搭建vue项目之前你需要安装vue的脚手架和node.js，一起去看看怎么搭建一个vue环境吧。（学编程语言最爱看见的就是用这个先写一个helloworld，只想说我对世界

绝地灬酷狼/ 2022年06月02日 07:07/ 0 赞/ 332 阅读

相关 vue脚手架（vue-cli）如何搭建项目

一、安装 1、安装nodejs（自带npm） 2、安装cnpm npm install -g cnpm --registry=https://registry.npm.

Love The Way You Lie/ 2022年05月30日 09:11/ 0 赞/ 289 阅读

相关 vue脚手架搭建

vue脚手架是个好东西，能够快速搭建vue单页面应用，vue是基于node环境的，所以要先安装node,去官网下载安装就可以。 node官网为：https://nodejs.

淡淡的烟草味﹌/ 2022年05月23日 08:18/ 0 赞/ 285 阅读

相关 vue学习二（搭建vue脚手架）

1 安装node环境进入[https://nodejs.org/en/][https_nodejs.org_en]下载node环境并安装。 2 安装vue 使用

Dear 丶/ 2022年01月31日 04:43/ 0 赞/ 283 阅读

相关搭建Vue脚手架

一、安装vue-cli 安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安

野性酷女/ 2021年12月04日 02:25/ 0 赞/ 422 阅读