1. 基础node环境和IDE的安装本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
vue项目的基础环境包括开发环境及IDE，IDE之前有篇文章记录：http://www.04007.cn/article/784.html 安装VScode即可。开发环境需要安装node.js。vue.js开发为什么要安装node.js呢？准确的说是使用vue-cli 搭建项目的时候需要nodejs。vue本身并不完全需要node.js。VUE同样可以像一个JS文件直接引入.html的script中来使用，但通过使用node使开发更方便，并能方便打包部署，解析vue单文件组件和vue模块，启动测试localhost, 管理vue-router，vue-resource插件等。所以推荐使用Vue+node方式。本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
node的下载地址：https://nodejs.org/en/ 选择版本download安装即可，这里选择的是Download for Windows (x64)。我这里使用的是git bash,安装成功后要重新开启git bash窗口。通过node -v 和npm -v命令检查安装是否成功，如果输出版本号，说明成功。本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
Administrator@CN-20190128OPJN MINGW64 /d/vue $ node -v v12.18.3 Administrator@CN-20190128OPJN MINGW64 /d/vue $ npm -v 6.14.6本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
2.搭建vue项目环境本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
进行这些操作时，git bash的当前目录可以为任何目录，比如电脑桌面desktop下，使用 npm install -g @vue/cli 安装vue-cli工具，注意这里一些老的文档上仍然是使用 npm install --global vue-cli 命令安装vue-cli工具，会报错npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli。应该用新的 npm install -g @vue/cli本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
Administrator@CN-20190128OPJN MINGW64 ~/Desktop
$ npm install --global vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
$ npm install -g @vue/cli
npm WARN deprecated @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
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
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 fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
C:\Users\Administrator\AppData\Roaming\npm\vue -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
> core-js@3.6.5 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\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 -)
> @apollo/protobufjs@1.0.5 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall
> nodemon@1.19.4 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
> ejs@2.7.4 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
npm WARN @vue/compiler-sfc@3.0.0-rc.11 requires a peer of vue@3.0.0-rc.11 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\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"})
+ @vue/cli@4.5.6
added 1321 packages from 698 contributors in 280.096s
本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.node运行的速度很慢，如为了提高效率，也可以使用淘宝镜像：http://npm.taobao.org/ ， 具体操作先输入：npm install -g cnpm -registry=https://registry.npm.taobao.org 安装npm镜像，使用cnpm来检查安装是否成功，以后再用到npm的地方直接用cnpm来代替即可。本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
Administrator@CN-20190128OPJN MINGW64 ~/Desktop $ npm config set registry https://registry.npm.taobao.org Administrator@CN-20190128OPJN MINGW64 ~/Desktop $ cnpm -v cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.14.8 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@12.18.3 (C:\Program Files\nodejs\node.exe) npminstall@3.27.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\Administrator\AppData\Roaming\npm win32 x64 6.1.7601 registry=https://r.npm.taobao.org本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
3. 创建vue项目本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
进入项目目录，这时就不要留在桌面操作了，如我们可以进入你的D：\vueProject 目录，然后开始创建一个基于 webpack 模板的新项目，新项目文件夹默认就在当前的目录下面。本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
Administrator@CN-20190128OPJN MINGW64 /d/vue
$ vue init webpack vue04007
? Project name (vue04007) vue04007
? Project name vue04007
? Project description (A Vue.js project) vue for 04007.cn project
? Project description vue for 04007.cn project
? Author (KermitCode <956952515@qq.com>) yes
? Author yes
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli 路 Generated "vue04007".
# Installing project dependencies ...
# ========================
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 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 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.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
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 resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
> core-js@2.6.11 postinstall D:\vue\vue04007\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:\vue\vue04007\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:\vue\vue04007\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 notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\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.13 (node_modules\watchpack-chokidar2\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@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1269 packages from 672 contributors in 162.243s
32 packages are looking for funding
run `npm fund` for details
# Project initialization finished!
# ========================
To get started:
cd vue04007
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.4. 运行vue项目本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
运行项目只需要进入到项目目录 ，执行run项目即可。如下：本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
Administrator@CN-20190128OPJN MINGW64 /d/vue
$ cd vue04007/
Administrator@CN-20190128OPJN MINGW64 /d/vue/vue04007
$ ll
total 622
drwxr-xr-x 1 Administrator 197121 0 九月 16 06:52 build/
drwxr-xr-x 1 Administrator 197121 0 九月 16 06:52 config/
-rw-r--r-- 1 Administrator 197121 263 九月 16 06:52 index.html
drwxr-xr-x 1 Administrator 197121 0 九月 16 06:55 node_modules/
-rw-r--r-- 1 Administrator 197121 1742 九月 16 06:52 package.json
-rw-r--r-- 1 Administrator 197121 460272 九月 16 06:55 package-lock.json
-rw-r--r-- 1 Administrator 197121 466 九月 16 06:52 README.md
drwxr-xr-x 1 Administrator 197121 0 九月 16 06:52 src/
drwxr-xr-x 1 Administrator 197121 0 九月 16 06:52 static/
Administrator@CN-20190128OPJN MINGW64 /d/vue/vue04007
$ npm run dev
> y@1.0.0 dev D:\vue\vue04007
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 28/33 modules 5 active ...ue04007\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting DONE Compiled successfully in 15099ms7:22:59 10: AM
I Your application is running here: http://localhost:8080
本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.然后便可以访问 http://localhost:8080 浏览VUE项目页面，截图如下：本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
本文地址:http://www.04007.cn/article/853.html,未经许可,不得转载.
本文地址:http://www.04007.cn/article/853.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.
|
|
手机扫码直接打开本页面 |
