作者：threedayman
来源：恒生LIGHT云社区
安装node.js
Node.js 是一个开源和跨平台的 JavaScript 运行时环境。
下载地址nodejs.cn/download/** 选择对应版本进行安装**
安装完之后运行以下命令验证安装是否成功,出现对应得版本号信息即为安装成功。
C:\Users\hspcadmin>node -v
v16.13.0
安装cnpm
npm（node package manager）是node.js的包管理器，用于node插件管理。
因为npm安装插件从国外服务器上下载，受网络影响较大。cnpm从淘宝镜像中拉取相关插件，减少因为网络等原因造成的异常。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后通过以下命令来查看是否安装成功,出现版本信息即表明安装成功。
C:\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 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
cnpm install -g @vue/cli
运行以下命令确认是否安装成功
C:\Users\hspcadmin>vue -V
@vue/cli 4.5.15
项目创建
通过vue-cli创建项目
D:\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)选项
success Saved lockfile.
Done in 49.84s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vue-hello.
👉 Get started with the following commands:
$ cd vue-hello
$ yarn serve
创建成功后出现以上提示信息。
运行创建的项目
D:\vueproject>cd vue-hello
D:\vueproject\vue-hello>npm run serve
> vue-hello@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 6318ms 下午7:25:14
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.114.25:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
访问 http://localhost:8080/ 出现以下页面
至此我们第一个vue的项目已经运行起来了。
更多VUE知识请参考官网cn.vuejs.org/
