一、安装node.js

1、下载node.js

下载地址：下载 | Node.js (nodejs.org)

2、安装

3、检查是否安装成功

打开cmd窗口检查是否安装成功：node -v（如果显示出了版本号，那么说明安装成功了）

二、搭建Vue环境

1、全局安装@vue/cli模块包

vue官网：cn.vuejs.org/

2、执行命令

切换阿里云镜像

npm config set registry https://registry.npm.taobao.org

安装@vue/cli -g

npm install -g @vue/cli

3、检查是否安装成功

node -v

三、创建Vue项目

1、创建项目

选择一个你想要创建项目的文件夹，打开控制端执行如下命令

vue create 项目名

注意：项目名不能有大写字母，中文和特殊符号

选择模板后，等待项目创建完毕即可

四、启动vue项目

1、执行命令

创建完项目后，控制端页面会如上图所示，此时我们我们只要按上图提示内容，执行相关命令即可。

cd 项目名 // 进入到该项目的文件目录下

npm run serve  // 启动内置的webback本地热更新开发服务器

2、启动vue

如果未自动弹出浏览器，手动复制输入提示的域名+端口。在浏览器中访问即可

五、vue项目目录文件含义和作用

1.node_modules文件夹：项目依赖文件
2.public文件夹：放置静态资源（图片），webpack在打包时会原封不动的打包到dist文件夹中。
3.src文件夹（程序员源代码文件夹）：
    3.1 assets文件夹：放置静态资源（多个组件共用的静态资源），在webpack打包时会把静态资源当成模块打包到JS文件中
    3.2 components：放置非路由组件（全局组件）
    3.3 router：配置项目路由文件，实现项目页面跳转
    3.4 views:存放页面目录
    3.5 APP.vue：代表父组件，Vue页面入口(进入项目的初始页面)，唯一的根组件
    3.6 main.js：程序入口文件，整个程序中最先执行的文件

4.browserslistrc：配置兼容浏览器,对于部分配置参数做一些解释。
5.editorconfig：定义代码格式。
6.eslintrc.js：用于代码格式化。
7.gitignore：git上传时需要忽略的文件。
8.babel.config.js：ES6语法编译配置。
9.package-lock.json：项目依赖包版本，锁定文件。
10.package.json：项目基本信息。
11.README.md：项目说明文件（markdown语法）。
12.vue.config.js：有此文件，在@vue/cli-service 启动时会自动加载。

六、修改端口号

项目中没有webpack.config.js文件，因为vue脚手架项目用的vue.config.js

在src并列目录中新建vue.config.js，填入如下配置，最后重启服务器即可修改端口号

module.exports = {
    devServer: { // 自定义服务配置
    port: 3000, // 修改的端口号
    open: true
}