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 未经许可,不得转载. 手机访问本页请扫描右下方二维码.
![]() |
![]() |
手机扫码直接打开本页面 |