vue demo 创建

最新推荐文章于 2024-09-13 07:16:12 发布

s470445610

最新推荐文章于 2024-09-13 07:16:12 发布

阅读量980

点赞数

本文链接：https://blog.csdn.net/s470445610/article/details/89285982

版权

http://blog.jobbole.com/25775/ github https://git-scm.com/downloads安装包下载
 http://javascript.ruanyifeng.com/nodejs/packagejson.html
首先安装nodejs
npm
安装CNPM命令
npm install -g cnpm --registry=http://registry.npm.taobao.org
安装装过程中使用淘宝镜像提供的命令集CNPM npm命令全部替换为CNPM

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖，走你

$ cd my-project
$ npm install
$ npm run dev
ESLint
安装cnpm 时提示报错信息
C:\Windows\system32>npm install -g cnpm --registry=http://registry.npm.taobao.org
npm ERR! path C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules.bin\npm
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules.bin\npm’
npm ERR! { Error: EPERM: operation not permitted, unlink ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules.bin\npm’
npm ERR! cause:
npm ERR! { Error: EPERM: operation not permitted, unlink ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules.bin\npm’
npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,
npm ERR! syscall: ‘unlink’,
npm ERR! path: ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\.bin\npm’ },
npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,
npm ERR! syscall: ‘unlink’,
npm ERR! path: ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\.bin\npm’ }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-07-01T01_35_38_106Z-debug.log

C:\Windows\system32>npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use ‘npm cache verify’ instead.
npm ERR!
npm ERR! If you’re sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-07-01T01_38_24_491Z-debug.log
解决以上问题执行以下命令集
npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
npm cache clean # 清空缓存
执行清楚缓存报错
C:\Windows\system32>npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use ‘npm cache verify’ instead.
npm ERR!
npm ERR! If you’re sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-07-01T01_43_28_065Z-debug.log
解决以上问题执行以下命令
next 执行npm cache verify 验证缓存
C:\Windows\system32>npm cache verify
Cache verified and compressed (~\AppData\Roaming\npm-cache_cacache):
Content verified: 0 (0 bytes)
Index entries: 0
Finished in 0.027s
经验证没有缓存文件
再次执行安装cnpm命令
依然报错同安装cnpm 时提示报错信息
安装之前删除C:\Users\Administrator\AppData\Roaming\npm\node_modules\目录下cnpm\node_modules.bin\npm
再次安装
C:\Windows\system32>npm install -g cnpm --registry=http://registry.npm.taobao.org
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm

cnpm@5.0.0
added 528 packages in 32.28s
看日志成功了差点都放弃了
执行cnpm -v验证下
C:\Windows\system32>cnpm -v
cnpm@5.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@5.0.4 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@8.1.2 (F:\dev_tools\nodejs\node.exe)
npminstall@3.0.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.14393
registry=http://registry.npm.taobao.org
看不太懂感觉应该是成功了
执行下一步验证下先验证
vue -v
报错
C:\Windows\system32>vue -v
module.js:487
throw err;
^

Error: Cannot find module ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue’
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
执行cnpm install -g vue-cli 安装vue
C:\Windows\system32>cnpm install -g vue-cli
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp_vue-cli@2.8.2@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli’s dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/43] commander@^2.9.0 installed at node_modules_commander@2.10.0@commander
[2/43] chalk@^1.1.1 installed at node_modules_chalk@1.1.3@chalk

WARN node unsupported “node@v8.1.2” is incompatible with download-git-repo@0.2.2 › download@4.4.3 › got@^5.0.0, expected node@>=0.10.0 <7
[3/43] connect-history-api-fallback@^1.3.0 installed at node_modules_connect-history-api-fallback@1.3.0@connect-history-api-fallback
[4/43] consolidate@^0.14.0 installed at node_modules_consolidate@0.14.5@consolidate
[5/43] async@^2.0.0-rc.2 installed at node_modules_async@2.5.0@async
[6/43] copy-webpack-plugin@^4.0.1 installed at node_modules_copy-webpack-plugin@4.0.1@copy-webpack-plugin
[7/43] file-loader@^0.9.0 installed at node_modules_file-loader@0.9.0@file-loader
[8/43] autoprefixer@^6.6.1 installed at node_modules_autoprefixer@6.7.7@autoprefixer
[9/43] download-git-repo@^0.2.1 installed at node_modules_download-git-repo@0.2.2@download-git-repo
[10/43] friendly-errors-webpack-plugin@^1.1.2 installed at node_modules_friendly-errors-webpack-plugin@1.6.1@friendly-errors-webpack-plugin
[11/43] express@^4.14.0 installed at node_modules_express@4.15.3@express
[12/43] installed-by-yarn-globally@^0.1.1 installed at node_modules_installed-by-yarn-globally@0.1.2@installed-by-yarn-globally
[13/43] css-loader@^0.26.1 installed at node_modules_css-loader@0.26.4@css-loader
[14/43] minimatch@^3.0.0 existed at node_modules_minimatch@3.0.4@minimatch
[15/43] extract-text-webpack-plugin@^2.0.0-rc.3 installed at node_modules_extract-text-webpack-plugin@2.1.2@extract-text-webpack-plugin
[16/43] opn@^4.0.2 installed at node_modules_opn@4.0.2@opn
[17/43] http-proxy-middleware@^0.17.3 installed at node_modules_http-proxy-middleware@0.17.4@http-proxy-middleware
[18/43] multimatch@^2.1.0 installed at node_modules_multimatch@2.1.0@multimatch
[19/43] post-compile-webpack-plugin@^0.1.0 installed at node_modules_post-compile-webpack-plugin@0.1.1@post-compile-webpack-plugin
[20/43] ora@^0.2.1 installed at node_modules_ora@0.2.3@ora
[21/43] metalsmith@^2.1.0 installed at node_modules_metalsmith@2.3.0@metalsmith
[22/43] rimraf@^2.6.1 existed at node_modules_rimraf@2.6.1@rimraf
[23/43] semver@^5.1.0 existed at node_modules_semver@5.3.0@semver
[24/43] inquirer@^0.12.0 installed at node_modules_inquirer@0.12.0@inquirer
[25/43] tildify@^1.2.0 installed at node_modules_tildify@1.2.0@tildify
[26/43] handlebars@^4.0.5 installed at node_modules_handlebars@4.0.10@handlebars
[27/43] read-metadata@^1.0.0 installed at node_modules_read-metadata@1.0.0@read-metadata
[28/43] user-home@^2.0.0 existed at node_modules_user-home@2.0.0@user-home
[29/43] html-webpack-plugin@^2.26.0 installed at node_modules_html-webpack-plugin@2.29.0@html-webpack-plugin
[30/43] babel-preset-vue-app@^0.4.0 installed at node_modules_babel-preset-vue-app@0.4.0@babel-preset-vue-app
[31/43] babel-core@^6.21.0 installed at node_modules_babel-core@6.25.0@babel-core
[32/43] webpack@^2.2.0 existed at node_modules_webpack@2.6.1@webpack
[33/43] webpack-dev-middleware@^1.9.0 installed at node_modules_webpack-dev-middleware@1.11.0@webpack-dev-middleware
[34/43] url-loader@^0.5.7 installed at node_modules_url-loader@0.5.9@url-loader
[35/43] validate-npm-package-name@^2.2.2 installed at node_modules_validate-npm-package-name@2.2.2@validate-npm-package-name
[36/43] postcss-loader@^1.2.1 installed at node_modules_postcss-loader@1.3.3@postcss-loader
[37/43] webpack-merge@^2.3.1 installed at node_modules_webpack-merge@2.6.1@webpack-merge
[38/43] webpack-hot-middleware@^2.15.0 installed at node_modules_webpack-hot-middleware@2.18.0@webpack-hot-middleware
[39/43] vue-template-compiler@^2.1.10 installed at node_modules_vue-template-compiler@2.3.4@vue-template-compiler
[40/43] request@^2.67.0 installed at node_modules_request@2.81.0@request
fsevents@1.1.2 download from binary mirror: {“module_name”:“fse”,“module_path”:"./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/",“remote_path”:"./v{version}/",“package_name”:"{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz",“host”:“https://npm.taobao.org/mirrors/fsevents”}
platform unsupported babel-loader@6.4.1 › webpack@2.6.1 › watchpack@1.3.1 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
[41/43] babel-loader@^6.2.10 installed at node_modules_babel-loader@6.4.1@babel-loader
[42/43] vue@^2.1.10 installed at node_modules_vue@2.3.4@vue
[43/43] vue-loader@^10.0.2 installed at node_modules_vue-loader@10.3.0@vue-loader
peerDependencies link ajv@4.11.8 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules_ajv-keywords@1.5.1@ajv-keywords unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\ajv(5.2.0)
Recently updated (since 2017-06-24): 15 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules.recently_updates.txt)
Today:
→ css-loader@0.26.4 › postcss-modules-extract-imports@1.1.0 › postcss@6.0.4 › supports-color@^4.0.0(4.1.0) (02:57:08)
2017-06-30
→ css-loader@0.26.4 › postcss-modules-extract-imports@1.1.0 › postcss@^6.0.1(6.0.4) (19:39:25)
→ css-loader@0.26.4 › postcss-modules-extract-imports@1.1.0 › postcss@6.0.4 › chalk@^2.0.1(2.0.1) (11:26:46)
→ html-webpack-plugin@2.29.0 › html-minifier@3.5.2 › uglify-js@3.0.x(3.0.22) (12:52:26)
2017-06-29
→ babel-core@6.25.0 › babel-code-frame@6.22.0 › js-tokens@^3.0.0(3.0.2) (04:54:17)
→ autoprefixer@6.7.7 › browserslist@1.7.7 › electron-to-chromium@^1.2.7(1.3.15) (16:02:25)
→ download-git-repo@0.2.2 › download@4.4.3 › readable-stream@^2.0.2(2.3.3) (22:17:53)
→ html-webpack-plugin@2.29.0 › html-minifier@3.5.2 › clean-css@4.1.x(4.1.5) (14:52:05)
→ vue-loader@10.3.0 › vue-template-es2015-compiler@^1.2.2(1.5.3) (08:29:25)
2017-06-27
→ babel-loader@6.4.1 › webpack@2.6.1 › node-libs-browser@2.0.0 › crypto-browserify@3.11.0 › create-ecdh@4.0.0 › elliptic@6.4.0 › hash.js@^1.0.0(1.1.2) (12:38:29)
→ autoprefixer@6.7.7 › caniuse-db@^1.0.30000634(1.0.30000696) (13:11:17)
→ babel-loader@6.4.1 › webpack@2.6.1 › yargs@6.6.0 › read-pkg-up@1.0.1 › read-pkg@1.1.0 › normalize-package-data@^2.3.2(2.4.0) (04:41:05)
→ babel-loader@6.4.1 › webpack@2.6.1 › yargs@6.6.0 › read-pkg-up@1.0.1 › read-pkg@1.1.0 › normalize-package-data@2.4.0 › hosted-git-info@^2.1.4(2.5.0) (04:25:47)
2017-06-26
→ async@^2.0.0-rc.2(2.5.0) (07:42:02)
2017-06-25
→ html-webpack-plugin@^2.26.0(2.29.0) (06:37:36)
All packages installed (793 packages installed from npm registry, used 13s, speed 1.07MB/s, json 731(1.26MB), tarball 13.18MB)
[vue-cli@2.8.2] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.8.2] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.8.2] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
[vue-cli@2.8.2] link C:\Users\Administrator\AppData\Roaming\npm\vue-build@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-build
没有看到报错应该试成功了
验证下
C:\Windows\system32>vue -V
2.8.2
很高兴成功了
继续下一步被虐
vue init webpack my-first-vue-project
使用vue脚手架生成webpak打包模式的my-first-vue-project
C:\Windows\system32> vue init webpack my-first-vue-project

‘git’ ��ڲ��ⲿ��Ҳ��ǿ��еĳ��
��ļ��
? Project name my-first-vue-project
? Project description this is my very first project
? Author sunguoqiang
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated “my-first-vue-project”.

To get started:

 cd my-first-vue-project
cnpm install安装下载依赖

cnpm install
\ [32/65] Installing which@~1.2.10
WARN node unsupported “node@v8.1.2” is incompatible with karma@^1.4.1, expected node@0.10 || 0.12 || 4 || 5 || 6 || 7
/ [36/65] Installing semver@^5.3.0platform unsupported babel-loader@6.4.1 › webpack@2.6.1 › watchpack@1.3.1 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 65 packages
√ Linked 761 latest versions
PhantomJS not found on PATH
Download already available at C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing H:\vue\demo\my-first-vue-project\node_modules_phantomjs-prebuilt@2.1.14@phantomjs-prebuilt\lib\phantom
Copying extracted folder C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1498878195123\phantomjs-2.1.1-windows -> H:\vue\demo\my-first-vue-project\node_modules_phantomjs-prebuilt@2.1.14@phantomjs-prebuilt\lib\phantom
Writing location.js file
Done. Phantomjs binary available at H:\vue\demo\my-first-vue-project\node_modules_phantomjs-prebuilt@2.1.14@phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe
Downloading https://tnpm-hz.oss-cn-hangzhou.aliyuncs.com/dist/chromedriver/2.30/chromedriver_win32.zip
Saving to C:\Users\Administrator\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
Received 781K…
Received 1563K…
Received 2345K…
Received 3127K…
Received 3901K total.
Extracting zip contents
Copying to target path H:\vue\demo\my-first-vue-project\node_modules_chromedriver@2.30.1@chromedriver\lib\chromedriver
Done. ChromeDriver binary available at H:\vue\demo\my-first-vue-project\node_modules_chromedriver@2.30.1@chromedriver\lib\chromedriver\chromedriver.exe
√ Run 2 scripts
peerDependencies link ajv@4.11.8 in H:\vue\demo\my-first-vue-project\node_modules_ajv-keywords@1.5.1@ajv-keywords unmet with H:\vue\demo\my-first-vue-project\node_modules\ajv(5.2.0)
Recently updated (since 2017-06-24): 20 packages (detail see file H:\vue\demo\my-first-vue-project\node_modules.recently_updates.txt)
Today:
→ css-loader@0.28.4 › postcss-modules-extract-imports@1.1.0 › postcss@6.0.4 › supports-color@^4.0.0(4.1.0) (02:57:08)
√ All packages installed (941 packages installed from npm registry, used 58s, speed 97.84kB/s, json 826(1.52MB), tarball 4.06MB)