vue3环境搭建及项目搭建

最新推荐文章于 2024-07-10 13:45:25 发布

请叫我大王哦

最新推荐文章于 2024-07-10 13:45:25 发布

阅读量828

点赞数 26

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44132290/article/details/140103235

版权

1. 安装node.js

安装完毕之后，执行node -v 命令查看node版本

2. npm

npm是随同nodejs一起安装的包管理工具，能解决nodejs代码部署上的很多问题；

可以通过输入 npm -v 来测试是否安装成功

3. 创建vue项目

使用 npm 全局安装 vue-cli(最新)
```
npm install -g @vue/cli
```
查看现在的版本
```
vue -V
```
创建一个项目
```
vue create 项目名称不能用中文
```
注意：不能用驼峰方式命名项目名称了，它会报错的，只能全小写

选择预设(默认/手动设置)

? Please pick a preset: (Use arrow keys)
  testPreset ([Vue 3] less, babel, router, vuex) 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features

移动上下键，选择最后一个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

移动上下键，箭头指着时，按空格键选中所需要的，以上选择的是babel、router、vuex、css pre-processors这四个插件，按回车到下一步

选择vue版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x

是否按照history的方式创建路由，选择yes，回车下一步

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

选择css预编译工具，选择less，回车下一步

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass) 
❯ Less 
  Stylus

想把的配置文件放在一个独立的配置文件中？还是放到package.json中？选择第一个，回车下一步

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

是否保存预设并用到以后的项目中，选择yes，回车下一步
```
? Save this as a preset for future projects? (y/N) yes
```
保存的预设名称是什么，设为testPreset，回车下一步
```
? Save preset as: testPreset
```

选择安装工具，回车下一步直到安装完成

? Pick the package manager to use when installing dependencies: NPM

运行
```
cd 项目名称
npm run serve
```

最终全部结果

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? 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): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: testPreset
? Pick the package manager to use when installing dependencies: NPM