第一个Vue项目

前提条件：

1.需要先安装node.js（包含npm），参考：安装node.js

2.为了提高npm下载速度，使用使用淘宝 NPM 镜像，安装淘宝镜像命令如下：

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

 

步骤：

在windows系统下操作为例：

1.进入命令行：按Win+R，输入cmd回车进入命令行窗口

2.全局安装webpack，命令如下：

cnpm install webpack -g

3.全局安装vue脚手架，命令如下：

cnpm install -g vue-cli

 4.切换到工作目录，这里在F盘下操作

C:\Users\Administrator>f:

F:\>cd F:\Study\vue\cainiao

 5.根据模板创建项目，命令如下：

vue init webpack-simple 工程名称

  过程中会出现提示，例如:? Project name abc, 按回车键选默认值即可，具体操作过程如下：

F:\Study\vue\cainiao>vue init webpack-simple abc

? Target directory exists. Continue? Yes
? Project name abc
? Project description A Vue.js project
? Author 
? License MIT
? Use sass? Yes

   vue-cli · Generated "abc".

   To get started:

     cd abc
     npm install
     npm run dev

6.切换到工程目录下（重要）

cd abc

 7.安装项目依赖

cnpm install

部分输出日志如下：

F:\Study\vue\cainiao\abc>cnpm install
/ [11/14] Installing has-symbols@^1.0.0platform unsupported webpack-dev-server@2.11.5 › chokidar@2.1.6 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
- [11/14] Installing kind-of@^6.0.2[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 14 packages
√ Linked 677 latest versions

......

Recently updated (since 2019-06-14): 6 packages (detail see file F:\Study\vue\cainiao\abc\node_modules\.recently_updates.txt)
  Today:
    → css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › caniuse-db@^1.0.30000634(1.0.30000976) (13:45:03)
    → babel-preset-env@1.7.0 › browserslist@3.2.8 › caniuse-lite@^1.0.30000844(1.0.30000976) (14:32:37)
√ All packages installed (774 packages installed from npm registry, used 21s(network 15s), speed 1.03MB/s, json 691(1.53MB), tarball 13.85MB)

8.安装路由和网络请求模块

cnpm install vue-router vue-resource --save

输出日志如下：

F:\Study\vue\cainiao\abc>cnpm install vue-router vue-resource --save
√ Installed 2 packages
√ Linked 39 latest versions
√ Run 0 scripts
√ All packages installed (32 packages installed from npm registry, used 1s(network 1s), speed 46.31kB/s, json 41(65.2kB), tarball 0B)

 9.启动项目

npm run dev

输出日志如下：

F:\Study\vue\cainiao\abc>npm run dev

> abc@1.0.0 dev F:\Study\vue\cainiao\abc
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

看到以上输出日志后，将自动弹出浏览器页面，如下：

 

 

参考链接：https://www.runoob.com/w3cnote/vue2-start-coding.html

 

完成， enjoy it!