0
点赞
收藏
分享

微信扫一扫

Vue3.x 超详细安装教程


Vue3.x 超详细安装教程_css

文章目录

  • ​​安装步骤​​
  • ​​1. 安装vue-cli​​
  • ​​1.1 卸载旧版本​​
  • ​​1.2 安装新的包​​
  • ​​1.3 升级全局的 Vue CLI 包​​
  • ​​1.4 查看当前 Vue CLI 版本​​
  • ​​2. 创建项目​​
  • ​​3. 选择配置​​
  • ​​4. 选择 Vue 版本​​
  • ​​5. 是否使用 class 风格的组件语法​​
  • ​​6. 是否使用 Babel 与 TypeScript 一起用于自动检测的填充​​
  • ​​7. 是否使用 history 路由模式​​
  • ​​8. 选择CSS预处理器​​
  • ​​9. 选择 eslint 配置​​
  • ​​10. 选择什么时候执行 eslint 校验​​
  • ​​11. 选择配置文件存放的位置​​
  • ​​12. 是否保存之前的配置项​​
  • ​​13. 等待下载依赖模块​​
  • ​​14. 装好后,进入目录,启动​​
  • ​​项目目录​​
  • ​​项目配置​​
  • ​​其他​​
  • ​​其他方法使用 Vue3.x​​
  • ​​官方文献​​
  • 请事先装好​​nodeJs​​
  • 整个 vue-cli 版本:​vue 3.0.0​ + ​vue-router 4.0.0-0​ + ​vuex 4.0.0-0​ + ​eslint 6.7.2​ + ​typescript 4.1.5​
  • ​​官方文档​​

安装步骤

1. 安装vue-cli

1.1 卸载旧版本

  • ​npm uninstall vue-cli -g​
  • ​yarn global remove vue-cli​

1.2 安装新的包

  • ​npm install -g @vue/cli​
  • ​yarn global add @vue/cli​

1.3 升级全局的 Vue CLI 包

  • ​npm update -g @vue/cli​
  • ​yarn global upgrade --latest @vue/cli​

1.4 查看当前 Vue CLI 版本

  • ​vue --version​
  • ​vue -V​

Vue3.x 超详细安装教程_node.js_02


当前我安装的 vue-cli 版本为:4.5.13

2. 创建项目

进入demo目录: ​​cd G:\demo\​​​ 创建​​my-project​​项目:​​vue create my-project​

Vue3.x 超详细安装教程_typescript_03

  1. 提供了三种设置:Vue2版、Vue3版、手动选择功能;
  2. 按键盘上下键选择默认(default)还是手动(Manually);
  3. 这里我选择第三种:Manually select features
  4. 回车键确认;

3. 选择配置

选择自己所要集成的配置(格键是选中与取消,A键是全选,回车确定)

这里我的选择如下:

Vue3.x 超详细安装教程_Vue3安装_04


配置项:

  1. (*)​Choose Vue version​​:选择 Vue 版本
  2. (*)​Babel​​:支持使用Babel编译器
  3. (*)​TypeScript​​:支持使用 TypeScript 书写源码
  4. ( )​Progressive Web App (PWA) Support​​:支持PWA
  5. (*)​Router​​:支持 vue-router
  6. (*)​Vuex​​:支持 vuex
  7. (*)​CSS Pre-processors​​:支持 CSS 预处理器
  8. (*)​Linter / Formatter​​:支持代码风格检查和格式化
  9. ( )​Unit Testing​​:支持单元测试
  10. ( )​E2E Testing​​: 支持 E2E 测试

4. 选择 Vue 版本

Vue3.x 超详细安装教程_typescript_05


这里我选择:3.x

安装的 vue-cli 将会是基于 vue3.x 版本

5. 是否使用 class 风格的组件语法

如果在项目中想要保持使用 TypeScript 的 class 风格的话,建议大家选择y。

Vue3.x 超详细安装教程_node.js_06


这里我选择:y

6. 是否使用 Babel 与 TypeScript 一起用于自动检测的填充

Vue3.x 超详细安装教程_node.js_07

这里我选择:y

7. 是否使用 history 路由模式

Vue3.x 超详细安装教程_vue3_08


这里我选择:y

8. 选择CSS预处理器

Vue3.x 超详细安装教程_vue3_09


Sass/SCSS分两种:

  • node-sass:是用 node(调用 cpp 编写的 libsass)来编译 sass,是自动编译实时的
  • dart-sass:是用 drat VM 来编译 sass,需要保存后才会生效

这里我选择:Sass/SCSS(with node-sass)

9. 选择 eslint 配置

Vue3.x 超详细安装教程_node.js_10

  1. ​ESLint with error prevention only​​:只进行报错提醒;
  2. ​ESLint + Airbnb config​​:Airbnb配置,不严谨模式;
  3. ​ESLint + Standard config​​:标准配置,正常模式;
  4. ​ESLint + Prettier​​:严格模式;
  5. ​TSlint​​:typescript格式验证工具

这里我选择:ESLint with error prevention only

10. 选择什么时候执行 eslint 校验

Vue3.x 超详细安装教程_node.js_11

  • ​Lint on save​​:保存时检查
  • ​Lint and fix on commit​​:提交时检查

这里我选择:Lint on save

11. 选择配置文件存放的位置

Vue3.x 超详细安装教程_Vue3安装_12

  • ​In dedicated config files​​:在专用的配置文件中单独存放
  • ​In package.json​​:存放在 package.json 中

这里我选择:In dedicated config files

12. 是否保存之前的配置项

Vue3.x 超详细安装教程_vue3_13


这里我选择:N

13. 等待下载依赖模块

Vue3.x 超详细安装教程_vue3_14

14. 装好后,进入目录,启动

Vue3.x 超详细安装教程_typescript_15

​cd my-project​​​ ( 进入项目根目录 )
​​​yarn serve​​ ( 启动项目 )

Vue3.x 超详细安装教程_css_16

项目目录

现在的目录是 Vue3.x 的 cli 看上去简洁多了,去掉了 Vue2.x 中 build 和 config 等目录

Vue3.x 超详细安装教程_Vue3安装_17

项目配置

在项目的根目录下新建 ​​vue.config.js​​ 文件(是根目录,不是src目录

module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // 部署生产环境和开发环境下的URL
outputDir: 'dist', // 构建输出目录(npm run build 或 yarn build 时 ,生成文件的目录名称)
assetsDir: 'assets', // 用于放置生成的静态资源(js、css、img、fonts)的;(项目打包之后,静态资源会放在这个文件夹下)
lintOnSave: true, // 是否开启eslint保存检测,有效值:ture | false | 'error'
runtimeCompiler: false, // 是否使用包含运行时编译器的Vue核心的构建
transpileDependencies: [], // 默认情况下 babel-loader 忽略其中的所有文件 node_modules,这里可增加例外的依赖包名
productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
filenameHashing: false, //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
css: { // 配置高于chainWebpack中关于 css loader 的配置
modules: false, // 是否开启支持 foo.module.css 样式
extract: true, // 是否使用 css 分离插件 ExtractTextPlugin,采用独立样式文件载入,不采用 <style> 方式内联至 html 文件中
sourceMap: false, // 是否构建样式地图,false 将提高构建速度
loaderOptions: { // css预设器配置项
sass: {
data: '' //`@import "@/assets/scss/mixin.scss";`
},
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
}
}
},
configureWebpack: (config) => {
//webpack-bundle-analyzer 插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
},
// 支持webPack-dev-server的所有选项
devServer: {
open: true, // 是否自动启动浏览器
host: '0.0.0.0',
port: 3000, // 端口号
https: false,
hotOnly: false,
proxy: null,
// proxy: { // 配置多个代理
// '/api': {
// target: '<url>',
// ws: true,
// changOrigin: true
// },
// "/foo": {
// target: "<other_url>"
// }
// },
before: app => {}
},
parallel: require('os').cpus().length > 1, // 构建时开启多进程处理 babel 编译
pwa: { // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
},
pluginOptions: {} // 第三方插件配置
};

其他

其他方法使用 Vue3.x

  1. 独立版本:可以在 Vue.js 的官网上直接下载最新版本, 并用​​<script>​​​ 标签引入,下载 ​​vue.js​​
  2. 使用 CDN
    unpkg(推荐):​​​https://unpkg.com/vue@next​​​ ,会保持和 npm 发布的最新的版本一致。
    Staticfile CDN(国内) :​​​https://cdn.staticfile.org/vue/3.0.5/vue.global.js​​​ cdnjs : ​​https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js​​
  3. Vite (推荐)

官方文献

  1. ​​Vue2.x​​
  2. ​​Vue3.x​​
  3. ​​Vue CLI​​
  4. ​​Vue Router​​
  5. ​​Webpack​​
  6. ​​TypeScript​​
  7. ​​Vite​​
  8. ​​Eslint​​
  9. ​​SASS​​
  10. ​​Babel​​


举报

相关推荐

0 条评论