从0开始学VUE - 运行第一个VUE项目

飞奔的炮台

作者：threedayman
来源：恒生LIGHT云社区

安装node.js
Node.js 是一个开源和跨平台的 JavaScript 运行时环境。
下载地址http://nodejs.cn/download/选择对应版本进行安装
安装完之后运行以下命令验证安装是否成功,出现对应得版本号信息即为安装成功。

:\Users\hspcadmin>node -v
v16.13.0

安装cnpm
npm（node package manager）是node.js的包管理器，用于node插件管理。
因为npm安装插件从国外服务器上下载，受网络影响较大。cnpm从淘宝镜像中拉取相关插件，减少因为网络等原因造成的异常。

install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后通过以下命令来查看是否安装成功,出现版本信息即表明安装成功。

:\Users\hspcadmin>cnpm -v
cnpm@7.1.0 (C:\Users\hspcadmin\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.15 (C:\Users\hspcadmin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@16.13.0 (D:\software\nodejs\node.exe)
npminstall@5.3.1 (C:\Users\hspcadmin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\hspcadmin\AppData\Roaming\npm
win32 x64 10.0.19041
registry=https://registry.npmmirror.com

安装vue-cli
vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

install -g @vue/cli

运行以下命令确认是否安装成功

:\Users\hspcadmin>vue -V
@vue/cli 4.5.15

项目创建
通过vue-cli创建项目

:\vueproject>vue create vue-hello
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

选择默认Default ([Vue 2] babel, eslint)选项

 Saved lockfile.

Done in 49.84s.

⚓  Running completion hooks...