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

二、安装cnpm

1、C:\Windows\system32> npm install -g cnpm --registry=https://registry.npm.taobao.org/

注：registry=https://registry.npm.taobao.org/ 指定使用淘宝的源

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

四、创建项目

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！