vue学习笔记 二、环境搭建+项目创建

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、官网下载安装 相当于jdk

https://nodejs.org/zh-cn/

注：参照第一篇博客

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！