美文网首页
vue3 安装及项目创建

vue3 安装及项目创建

作者: 臭臭的胡子先生 | 来源:发表于2022-08-20 07:43 被阅读0次

创建一个vue3项目,需要安装node环境,

推荐使用VScode 点击下载
安装推荐

1.Chinese  汉化包安装
2.Vetur  vue 代码插件安装
3.HTML Snippets 代码自动补全工具
4.code-spell-checker 代码格式错误提示插件

安装node 点击下载
安装成功后查看node跟npm版本

$ node -v
v14.10.1
//其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v,直接查看版本即可
$ npm -v
6.14.11

此处是node跟npm的一个简介,有兴趣的可以点击进去查看

yarn 安装

npm install -g yarn yarn

安装 淘宝镜像

npm下载比较慢可以使用cnpm进行下载

npm install -g cnpm -registry=https://registry.npm.taobao.org

查看是否安装成功

$ cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.8 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@14.10.1 (/usr/local/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 19.6.0 
registry=https://r.npm.taobao.org

说明:如果安装使用过vue脚手架,或使用过vue2,请先卸载!卸载语句如下:

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

运行完毕后,就是一个干净的脚手架工具了!
安装脚手架

npm install -g @vue/cli 

创建项目
初始化项目文件夹,如我的项目名是 demo

vue create demo

根据自己的需求选择项目需要的功能。

Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features 

根据自己的需求勾选

Vue CLI v5.0.8
? 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, and <enter> to proceed)
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

一路回车

? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected 
polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) 
❯ Less 
  Stylus 


创建完毕后,进入你的项目根目录

cd demo 
npm run serve

打开浏览器,在地址栏输入

http://localhost:8080

相关文章

网友评论

      本文标题:vue3 安装及项目创建

      本文链接:https://www.haomeiwen.com/subject/ejupgrtx.html