使用vue 3.0 初始化vue脚手架

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue-cli3.0安装

 1 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它:
 2 
 3 npm uninstall vue-cli -g
 4 安装
 5 
 6 npm install -g @vue/cli // 安装cli3.x
 7 vue --version // 查询版本是否为3.x
 8 如果不想用cli3.x，cli3也能使用2.x模板，命令如下：
 9 
10 npm install -g @vue/cli-init // 安装这个模块
11 // 就可以使用2.x的模板：vue init webpack my-project

node环境

 1 3.x需要在Node.js8.9或更高版本(推荐8.11.0+),在使用前请检查下node的版本，命令如下:
 2 
 3 node -v
 4 如果你的版本不够，可以使用下面的命令行来把Node版本更新到最新的稳定版：
 5 
 6 npm install -g n // 安装模块 这个模块是专门用来管理node.js版本，或者使用yarn安装：yarn global add @vue/cli
 7 n stable // 更新你的node版本
 8 mac下如果提示你权限不够，执行：
 9 
10 sudo n stable
11 安装之后，记得查看版本号：查看版本（是否安装成功）：vue -V (大写的V)

创建项目

 1、命令：

1 vue create hello-word

hello-word是文件夹名字，如果不存在会自动创建文件夹，如果存在会安装到那个文件夹中。 

与 2.0 不同的是这里不再是选择模板，而是预设 presets。

注：按键盘上下键选择默认（default）还是手动（Manually）， //如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动。

这里默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

自定义配置：

选择 [自定义] ，通过方向键上下移动，空格选中，Enter确定，自定义配置中，您将会看到这些配置项：  

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript                                 // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support          // PWA 支持
 ( ) Router                                     // 支持 vue-router
 ( ) Vuex                                       // 支持 vuex
 ( ) CSS Pre-processors                         // 支持 CSS 预处理器。
 ( ) Linter / Formatter                         // 支持代码风格检查和格式化。
 ( ) Unit Testing                               // 支持单元测试。
 ( ) E2E Testing                                // 支持 E2E 测试。
 // 注意：你要集成什么就选就行了（注：空格键是选中与取消，A键是全选）

vue-cli3.0安装完成后，会发现比基本目录结构相对 2.0 精简了不少 。webpack配置的目录不见了，也就是没有build、config这两个文件夹了，想要配置的话，需要在项目根目录下创建vue.config.js文件。

  • 这种方式的优势对小白来说非常友好，不会一上来就两个文件夹，一堆文件，看着脑袋都大了。

  • 然后在引用抄别人的配置的时候，也非常方便，直接将文件复制过来就好了。

  • static文件夹改为public了，router文件夹变成了单个文件之类的 。 

  • 在自定义一下webpack的配置，我们需要在根目录新建一个vue.config.js文件，文件中应该导出一个对象，然后进行配置，详情查阅官方文档

1 // vue.config.js
2 module.exports = {
3   // 选项...
4 }

目录说明：

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

1 vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 

启动项目

初始完之后，进入到项目根目录： cd my-project  

命令

1 npm run serve // 不是之前的 npm run dev

在浏览器输入http://localhost:8080就可以看到vue的欢迎界面

打包上线

  1. vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build

  2. 执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

vue.config.js 配置说明  

这里简单罗列vue,config.js一些配置项 当然你配置接口地址时还是通过下边这个来获取 在main.js里或者单独配置接口地址的文件里：

 1 var env = process.env.NODE_ENV
 2 console.log(env)
 3 vue.config.js文件：
 4 
 5 // vue.config.js 配置说明
 6 // 这里只列一部分，具体配置惨考文档啊
 7 module.exports = {
 8     // baseUrl  type:{string} default:'/' 
 9     // 将部署应用程序的基本URL
10     // 将部署应用程序的基本URL。
11     // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
12     // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，
　　　　//如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
13 
14     baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
15 
16     // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
17 
18     // outputDir: 'dist',
19 
20     // pages:{ type:Object,Default:undfind } 
21 /*
22   构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
23   个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
24   的字符串，
25   注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
26 */
27     // pages: {
28         // index: {
29             // entry for the page
30             // entry: 'src/index/main.js',
31             // the source template
32             // template: 'public/index.html',
33             // output as dist/index.html
34             // filename: 'index.html'
35         // },
36         // when using the entry-only string format,
37         // template is inferred to be `public/subpage.html`
38         // and falls back to `public/index.html` if not found.
39         // Output filename is inferred to be `subpage.html`.
40         // subpage: 'src/subpage/main.js'
41     // },
42 
43     //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
44     lintOnSave: true,
45     // productionSourceMap：{ type:Bollean,default:true } 生产源映射
46     // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
47     productionSourceMap: false,
48     // devServer:{type:Object} 3个属性host,port,https
49     // 它支持webPack-dev-server的所有选项
50 
51     devServer: {
52         port: 8085, // 端口号
53         host: 'localhost',
54         https: false, // https:{type:Boolean}
55         open: true, //配置自动启动浏览器
56         // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
57         proxy: {
58             '/api': {
59                 target: '<url>',
60                 ws: true,
61                 changeOrigin: true
62             },
63             '/foo': {
64                 target: '<other_url>'
65             }
66         },  // 配置多个代理
67     }
68 }

以上是 使用vue 3.0 初始化vue脚手架 的全部内容， 来源链接： utcz.com/z/375264.html

回到顶部