Vue.js安装教程

作者: 俞其荣 | 来源:发表于2017-12-21 21:16 被阅读550次

博文出处:Vue.js安装教程,欢迎大家关注我的博客,谢谢!

安装步骤

  1. 安装 node.js (网址:https://nodejs.org/en/)。

  2. 基于 node.js ,利用淘宝 npm 镜像安装相关依赖。在 cmd 里直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装。

  3. 安装全局 vue-cli 脚手架,用于帮助搭建所需的模板框架,在 cmd 里

    1. 输入:cnpm install -g vue-cli,回车,等待安装;

    2. 输入: vue ,回车,若出现 vue 信息说明表示成功。

  4. 创建项目,在 cmd 里输入:vue init webpack vue_test(项目文件夹名) ,回车,等待一小会儿,依次出现下列选项,输入后创建成功。

    create vue project
  5. 安装依赖,在 cmd 里

    1. 输入:cd vue_test ,回车,进入到具体项目文件夹

    2. 输入:npm install,回车,等待一小会儿,安装依赖。

  6. 测试环境是否搭建成功

    1. 在 cmd 里输入:npm run dev

    2. 在浏览里输入:localhost:8080(默认端口为8080)

    运行起来后的效果如下图所示:

    Vue running

安装中遇到的问题

vue init webpack vue_test

C:\Users\h\Desktop>vue init webpack vue_test
C:\Users\h\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60
let template = program.args[0]
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup
ported outside strict mode
    at exports.runInThisContext (vm.js:54:16)
    at Module._compile (module.js:375:25)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Function.Module.runMain (module.js:431:10)
    at startup (node.js:141:18)
    at node.js:977:3

nodejs版本太低,去官网更新即可。

npm install

C:\Users\h\Desktop\vue_test>npm install

> chromedriver@2.33.2 install C:\Users\h\Desktop\vue_test\node_modules\chromedri
ver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.
zip
Saving to C:\Users\h\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
ChromeDriver installation failed Error with http(s) request: Error: connect ETIM
EDOUT 172.217.160.112:443
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.33.2 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chromedriver@2.33.2 install script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\h\AppData\Roaming\npm-cache\_logs\2017-11-25T07_25_19_228Z
-debug.log

因为 chromedriver 被墙了,所以需要输入命令 cnpm install chromedriver ,安装 chromedriver 。

相关文章

  • Vue.js安装

    Vue.js 安装 在看教程时里面提到 在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好...

  • Vue.js安装教程

    博文出处:Vue.js安装教程,欢迎大家关注我的博客,谢谢! 安装步骤 安装 node.js (网址:https:...

  • Vue.js重构有赞商城-配置

    1. 搭建脚手架 Vue-cli官方教程Vue.js安装教程 yarn global add vue-cli脚手架...

  • Vue.js入门笔记—环境搭建

    Vue.js官网教程 demo地址 环境:node.js环境(直接官网下载包安装即可) npm安装(一般安装nod...

  • vue框架基本使用

    一、下载vue.js https://cn.vuejs.org/ 学习-》教程-》安装 开发版本 二、路径 将vu...

  • 初识vue.js

    vue.js官网教程学习笔记和学习摘要 起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,...

  • vue.js教程

    vue.js教程

  • Vue的基本使用

    前端的主流框架 Vue.js,Angular.js,*React.js * Vue的教程网站 安装 使用 v-cl...

  • web项目初建--Vue.js初使用

    1.下载 Vue.js官网:https://cn.vuejs.org/,点击学习->教程->安装, 2.引用 ht...

  • Vue-Devtools

    注:需要用vue.js,不要使用压缩版的vue.min.js 安装 转自Vue-Devtools安装配置教程(献给...

网友评论

本文标题:Vue.js安装教程

本文链接:https://www.haomeiwen.com/subject/uarzwxtx.html