创建一个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
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@3.11.0
运行完毕后,就是一个干净的脚手架工具了!
安装脚手架
npm install -g @vue/cli
创建项目
初始化项目文件夹
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
网友评论