vue学习笔记 二、环境搭建+项目创建
|
系列导航 | ||
|---|---|---|
一、官网下载安装 相当于jdk
注：参照第一篇博客
https://www.cnblogs.com/yclh/p/15341868.html
查看版本
D:\>node -v
v14.17.5
安装后自带npm
C:\Windows\system32>npm -v
6.14.15
注：npm安装到指定版本 npm install npm@6.14.18 -g
二、安装cnpm
1、C:\Windows\system32> npm install -g cnpm --registry=https://registry.npm.taobao.org/
注：换成 npm install -g cnpm --registry=https://registry.npmmirror.com 之前的居然过期了。。。
注：cnpm安装到指定版本npm install -g cnpm@7.0.0 --registry=https://registry.npmmirror.com
2、安装成功后查看cnpm的版本
C:\Windows\system32>cnpm -v
cnpm@7.0.0 (C:\Users\yc\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.15 (C:\Users\yc\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.17.6 (D:\soft\nodejs\node.exe)
npminstall@5.0.2 (C:\Users\yc\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\yc\AppData\Roaming\npm
win32 x64 10.0.19042
registry=https://registry.nlark.com
三、 安装vue的环境
D:\>cnpm i -g vue @vue/cli
D:\>vue --version
@vue/cli 4.5.13
注：vue/cli安装到指定版本cnpm i -g vue @vue/cli@4.5.13
四、创建项目
1、进入D:/soft,创建firstdemo项目
D:\soft>vue create firstdemo
2、如下选择Manually select features 回车
Vue CLI v4.5.13
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
3、选择如下，上下光标 按空格选择 选好后回车进入下一步
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
>( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
4、选择版本 使用3.x的版本
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x
5、输入Y 回车
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, 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) (Y/n) y
6、选择Sass/SCSS (with dart-sass)（默认） 回车
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, 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): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
7、选择In dedicated config files（默认）回车
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, 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): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
8、是否对之前的选择 设置一个预设名 如果选择Y了就要输入一个名字，下载在创建的时候第2步那里就会出现这里的预设名。不需要直接输入N即可
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, 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): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
等待项目的创建……
9、进入创建的项目运行起来
D:\soft\ firstdemo > npm run serve
启动成功后返回
DONE Compiled successfully in 1774ms 上午10:37:43
App running at:
- Local: http://localhost:8080/
- Network: http://172.31.144.8:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
10、浏览器打开 http://localhost:8080/
看到这个恭喜恭喜，证明项目创建成功。
资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！