安装vue环境，并新建Vue项目

最新推荐文章于 2024-07-26 18:21:15 发布

原创最新推荐文章于 2024-07-26 18:21:15 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何从零开始安装配置Vue开发环境，包括Node.js和npm的安装验证、使用淘宝npm源、安装vue-cli并创建基于webpack的新Vue项目。此外还介绍了项目目录结构，帮助初学者快速上手。

一、安装vue环境，并新建Vue项目
首先我们上node.js官网(https://nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，
在这里插入图片描述

我们就已经具备了node和npm的环境啦。安装完成之后检查下版本信息：

Microsoft Windows [版本 10.0.19041.985]
(c) Microsoft Corporation。保留所有权利。

C:\Users\Administrator>node -v
v14.16.1

C:\Users\Administrator>npm -v
6.14.12

C:\Users\Administrator>

二、安装vue的环境

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install --g vue-cli

三、进入项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

PS D:\RuXingDemo\后台管理项目\前端Vue+Element> vue init webpack VueAdmin

? Project name vueadmin
? Project description A Vue.js project
? Author ruxingxing <549589768@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "VueAdmin".


# Installing project dependencies ...
# ========================

npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

> core-js@2.6.12 postinstall D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1394 packages from 716 contributors and audited 1401 packages in 194.275s

49 packages are looking for funding
  run `npm fund` for details

found 51 vulnerabilities (3 low, 42 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> vueadmin@1.0.0 lint D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd VueAdmin
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

四、进入项目：cd VueAdmin

PS D:\RuXingDemo\后台管理项目\前端Vue+Element> cd VueAdmin
PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin>

五、npm run dev，启动项目

PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin> npm run dev

> vueadmin@1.0.0 dev D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% 12% 12% 12% 12% 13% 13% building modules 29/31 modules 2 active ...项目\前端Vue+Element\VueAdmin\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 14% 14% 95% emitting

 DONE  Compiled successfully in 4057ms                                                                      上午11:28:14

 I  Your application is running here: http://localhost:8080