关于javascript:从0开始学VUE-运行第一个VUE项目

作者：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/ 呈现以下页面

至此咱们第一个 vue 的我的项目曾经运行起来了。

更多 VUE 常识请参考官网 https://cn.vuejs.org/