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！