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

恒生LIGHT云社区 - 2021-12-15 15:44:28

作者：threedayman

来源：恒生LIGHT云社区

安装node.js

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。

下载地址http://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/ 出现以下页面

title=