安装和创建Vue项目

1.搭建开发环境

1.1 安装Node.js

官网下载:Node.js (nodejs.org)

安装过程中无脑下一步 自动安装结束

1.2 配置npm源

在cmd命令窗口中输入

npm config set registry https://registry.npmmirror.com

配置完成之后 查看 npm源

npm config get registry

2.安装VUE Cli

在cmd命令窗口中输入

npm install -g @vue/cli

安装完成之后 输入Vue -V查看是否安装完成

Vue -V

显示结果如下 即安装成功

3.创建Vue工程

3.1创建工程

通过cmd窗口创建

首先在cmd中切换到安装目录

(这里我是先切换到d盘 然后切换到工程目录下)

d:
cd Vue-Workspace

使用 vue create 命令即可创建 VUE CLI 工程，命令格式是：

vue create 工程名称

创建过程中会有一些选项，最先提示的选项是 Please pick a preset ，表示 “ 请选择一个预设项 ” ，推 荐选择 Manually select features ，表示 “ 手动选择 ” ，通过键盘的上下箭头进行选择，选择到目标项 后按下键盘的 Enter 键到下一步：

 接下来的选项是 Check the features needed for your project ，表示“选择你的工程中需要使用 的功能”，推荐在列表中选择 Babel 、 Router 、 Vuex 这3项，

接下来的选项是 Choose a version of Vue.js that you want to start the project with ，表

示 “ 选择你的工程中希望使用的 Vue.js 的版本 ” ，推荐选择 2.x 这项，

接下来的选项是 Use history mode for router ，表示 “ 是否在路由中选择历史模式 ” ，推荐选择

“ 是 ”

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ，表示 “ 你习

惯把一些配置信息存放在哪里？ ” ，推荐选择 In package.json ，即存放在 package.json 文件中

最后的选项是 Save this as a preset for future projects? ，表示 “ 是否保存以上配置信息，作

为后续将创建的新工程的预设？ ” ，推荐选择 “ 否 ”

通过Vue图形界面创建工程

打开cmd窗口切换到项目工程目录中  使用Vue -ui打开图形化界面

cd Vue-Workspace

vue ui

步骤如下:

 

 

 

 等待一会,项目就创建好了

3.2启动项目

打开cmd窗口 切换到项目路径下 输入以下代码即可打开项目

npm run serve