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
4. 特别注意事项
在mac上安装会报错Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules
原因:执行命令时没有获得管理员权限
解决办法:在命令行前面添加sudo获取管理员权限
例如原来的为:npm install -g vue-cli
应该改为:sudo npm install -g vue-cli