vue3.0的安装配置(含node和npm的配置)
文章目录一、下载Node.js二、配置环境变量三、配置NPM下载存放目录(文件不用事先创建)四、NPM设置镜像仓库(淘宝镜像仓库)五、vue-cli脚手架Vue3.0项目一、下载Node.js下载地址二、配置环境变量在CMD中运行node -v和npm -v这两条命令,如果都能输出版本号,说明nodejs安装成功。三、配置NPM下载存放目录(文件不用事先创建)npm config set pref
·
一、下载Node.js
二、配置环境变量
在CMD中运行node -v和npm -v这两条命令,如果都能输出版本号,说明nodejs安装成功。
三、配置NPM下载存放目录(文件不用事先创建)
npm config set prefix "D:\Software\node\node_global"
npm config set cache "D:\Software\node\node_cache"
四、NPM设置镜像仓库(淘宝镜像仓库)
npm config set registry https://registry.npm.taobao.org
在User文件夹下有一个.npmrc的文件,这里面就有刚刚为npm配置的信息。
五、vue-cli脚手架创建Vue3.0项目
1.安装最新班的vue-cli
npm install -g @vue/cli
or
yarn globaladd @vue/cli
安装成功后查看版本:vue -V(大写的V)
2.通过脚手架创建vue项目
vue create 项目名称
如果提示 ‘vue 不是内部命令’,此时需要对刚刚安装的vue-cli 3.0 设置环境变量添加到 path中。
此时再去创建vue项目即可(填写项目的基本配置信息): vue create 项目名
下面是通过脚手架创建项目的过程:
Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys) 选择预设:
Default ([Vue 2] babel, eslint) :模板2预设
Default (Vue 3 Preview) ([Vue 3] babel, eslint) :模板3预设
> Manually select features :手动选择功能
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: 检查项目所需的功能:(使用空格选择)
>(*) Choose Vue version :选择Vue版本
(*) Babel :Babel
( ) TypeScript :TypeScript
( ) Progressive Web App (PWA) Support :渐进式Web App(PWA)支持
(*) Router :路由器
(*) Vuex :Vuex
(*) CSS Pre-processors :CSS预处理器
(*) Linter / Formatter :Linter / Formatter
( ) Unit Testing :单元测试
( ) E2E Testing :E2E测试
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Choose a version of Vue.js that you want to start the project with 选择您要用来启动项目的Vue.js版本
2.x :2.x
> 3.x (Preview) :3.x (预览)
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)? n 是否针对router使用history模式(默认为hash) y/n:
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 选择一个CSS预处理器
Sass/SCSS (with dart-sass) :Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass) :Sass/SCSS (with node-sass)
Less :Less
Stylus :Stylus
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: 代码检查和格式化类型:
ESLint with error prevention only :仅具有错误预防功能的ESLint
ESLint + Airbnb config :ESLint + Airbnb配置
ESLint + Standard config :ESLint + Standard config
> ESLint + Prettier :ESLint + Prettier
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) 选择检查类型?
>(*) Lint on save :保存时
( ) Lint and fix on commit :提交时
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) 在哪里保存这些配置?
> In dedicated config files :在专用的配置文件中
In package.json :在package.json中
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) NO 是否将当前设置保存并应用于下一个工程(相当于下次创建项目时,使用这个模板创建)y/n?
搞定!!!!!!!!!! 有兴趣的可以使用IDEA 开发工具 创建VUE脚手架还是相当方便的
更多推荐
已为社区贡献1条内容
所有评论(0)