VUE的安装与项目创建

VUE安装与项目创建

1.VUE安装

1. 安装Node.js，下载地址：

https://nodejs.org/en/download/

选择适合自己的版本，推荐LTS，长久稳定版本。这里选择的是Windows Installer(.msi) 64-bit

下载好后自行安装，安装好后CMD进入控制台输入命令 node -v 查看

2. npm管理器

   npm包管理器，是集成在node中的，所以安装了node也就有了npm。查看npm版本号使用命令 npm -v

3.设置镜像，修改源为淘宝镜像，方便后续下载包更快

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

使用命令npm config list查看配置

之前：

之后：

4. 安装vue.js

npm  install -g vue-cli

耐心等待安装完成，

因为之前已经安装好了VUE，所以会报已存在

查看是否安装成功 vue -V 或 vue --version

2.创建VUE项目

以下是命令行创建项目的简单步骤

1.选择合适位置创建文件夹以放置要创建的vue项目

进入命令提示符窗口 输入命令 vue create project_name， project_name 即为你的vue项目名称

回车后进入

这里选择最后一个，手动选择要创建的vue的特性， 回车进入

这里选择很大概率用到的Router（Vue路由）和Vuex（Vue状态管理），回车

版本选择自己喜欢的就好，这里笔者选择2.x版本的

回车

路由使用记录 选择是 Y

一般会使用ESLint + Prettier来统一代码风格 这样使代码更美观，更严谨统一，这里笔者为了省事选择标准配置，回车

lint on save：代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error，一般选Lint on save

lint and fix on commit：代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit操作时，自动帮我们把有语法错误的地方修改为符合规范。

回车

• In dedicated config files： 单独保存在各自的配置文件中
• In package.json： 保存在package.json文件中

这里为了省事选择第二个，回车

最后一步 选择是否记录这次 以便下次再使用 笔者一般都选择不保留

确定后 就开进行配置了

2. 创建完成后，进入创建的项目，cd project_name

然后输入命令启动 npm run serve ，运行结果

最后打开浏览器访问 http://localhost:8081/ 就行啦！