Vue.js入门安装

Vue.js

一、命令行工具

基础vue.js框架，打包工具，测试工具，开发调试服务器，不用关心具体打包部署的细节，而关注功能实现

npm下载很慢，使用淘宝npm镜像，网址：npm.taobao.org

(1)安装node.js

Download | Node.js，下载 Node.js，安装好，版本6.6.11以上

环境变量PATH

D:\muceEnvironment\node.js\

打开cmd窗口，输入  node -v  ，如果出现版本号，那就安装成功！

(2)安装vue.js

用CNPM代替NPM来安装依赖包，npm和cnpm都是包管理工具

Cmd输入npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装

安装成功

C:\Users\小烂云\AppData\Roaming\npm\cnpm -> C:\Users\小烂云\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm

C:\Users\小烂云\AppData\Roaming\npm

将红色路径添加进Path环境变量

安装vue及脚手架vue.CLI命令行工具

cnpm install vue

cnpm install -g vue-cli             其中-g是安装到系统node目录下，全局环境

其中信息，看看就可以

Downloading vue-cli to C:\Users\小烂云\AppData\Roaming\npm\node_modules\vue-cli_tmp

Copying C:\Users\小烂云\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.3@vue-cli to C:\Users\小烂云\AppData\Roaming\npm\node_modules\vue-cli

Installing vue-cli's dependencies to C:\Users\小烂云\AppData\Roaming\npm\node_modules\vue-cli/node_modules

安装vue调试工具vue-devtools安装及使用

到vue官网->起步->安装，找到github地址，下载zip包，保存到一个路径下

解压，然后cmd进入到该路径下

输入cnpm install安装依赖包

遇到问题

deprecate nightwatch@0.9.21 › proxy-agent@2.0.0 › socks-proxy-agent@2.1.1 › socks@~1.1.5 If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

Recently updated (since 2018-04-29): 10 packages (detail see file C:\vue-devtools-master\node_modules\.recently_updates.txt)

emmmmmmmmm

这是由于build写成了bulid

二、如何使用命令行工具

首先自己建立一个vue工程的工作空间

Cmd切换到工作空间

# 创建一个基于 webpack 类型模板的新项目
cmd->

vue init webpack my-first-vue-project【这是名字，随便起】

如下

F:\vue_workspace>vue init webpack my-first-vue-project

? Project name my-first-vue-project

? Project description this is my first vue project    【描述】

? Author xiaolanyun <2407512504@qq.com>

? Vue build standalone

? Install vue-router? Yes              【vue.js下的路由组件】

? 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 "my-first-vue-project".

# Installing project dependencies ...

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

[ .................] \ fetchMetadata: sill pacote range manifest for es6-weak-map@^2.0.1 fetched in 211ms

等待创建完成

my-first-vue-project\src\下有主件

安装依赖

cmd进入工程目录

F:\vue_workspace>cd F:\vue_workspace\my-first-vue-project

F:\vue_workspace\my-first-vue-project>cnpm install

√ Installed 58 packages

√ Linked 0 latest versions

√ Run 0 scripts

√ All packages installed (used 101ms, speed 0B/s, json 0(0B), tarball 0B)

所有依赖安装在node_modules中

继续运行

npm run dev

打开浏览器到8080查看

在my-first-vue-project->src下进行编辑开发

使用visual studio code编辑器进行开发，打开文件夹即可