您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

vue 项目实例-首页 webpack项目搭建

发布时间：2020-04-30 11:44:05编辑：雪饮阅读（）

当前版本

C:\Users\Administrator\WebstormProjects\untitled>vue -V

2.9.6

初始化项目

C:\Users\Administrator\WebstormProjects\untitled>vue init webpack cms_project_04

? Project name cms_project_04

? Project description A Vue.js project

? Author snowDrink

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch? Yes

? Should we run `npm install` for you after the project has been created? (recommended) npm

 

   vue-cli · Generated "cms_project_04".

 

 

# Installing project dependencies ...

初始化到后面可能你会遇到

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.

Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip

Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip

ChromeDriver installation failed Error with http(s) request: Error: read ECONNRESET

npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! chromedriver@2.46.0 install: `node install.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the chromedriver@2.46.0 install script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-04-30T03_31_27_504Z-debug.log

安装npm镜像源管理工具

C:\Users\Administrator>npm install -g nrm

npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)

C:\Users\Administrator\AppData\Roaming\npm\nrm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\nrm\cli.js

+ nrm@1.2.1

added 494 packages in 11.164s

查看可选源

C:\Users\Administrator>nrm ls

 

  npm -------- https://registry.npmjs.org/

  yarn ------- https://registry.yarnpkg.com/

  cnpm ------- http://r.cnpmjs.org/

  taobao ----- https://registry.npm.taobao.org/

  nj --------- https://registry.nodejitsu.com/

  npmMirror -- https://skimdb.npmjs.com/registry/

  edunpm ----- http://registry.enpmjs.org/

此时我们回到上面这个问题点，切换一个比较好用的源，大家都比较喜欢taobao源，上面的问题是下载一个谷歌驱动要翻墙，所以就出错了。

C:\Users\Administrator\WebstormProjects\untitled>nrm use taobao

 

 

   Registry has been set to: https://registry.npm.taobao.org/

然后我们安装结束后出现如下：

# Project initialization finished!

# ========================

 

To get started:

 

  cd cms_project_04

  npm run dev

 

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

我们只需要按提示进入项目目录npm run dev即可运行我们的项目