Vue 入门

Question

安装 npm

$ sudo pacman -Syu npm
正在解决依赖关系...
正在查找软件包冲突...

软件包 (5) c-ares-1.13.0-1  http-parser-2.7.1-1  nodejs-9.2.0-1  semver-5.4.1-1
           npm-5.5.1-2

下载大小:    8.23 MiB
全部安装大小：  39.24 MiB

:: 进行安装吗？ [Y/n] y
...
$ npm -v
5.5.1

安装淘宝的 npm 镜像，以便安装包从国内镜像下载

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org  
/usr/bin/cnpm -> /usr/lib/node_modules/cnpm/bin/cnpm
+ cnpm@5.1.1
added 693 packages in 18.173s
$ cnpm -v 
cnpm@5.1.1 (/usr/lib/node_modules/cnpm/lib/parse_argv.js)
npm@5.5.1 (/usr/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@9.2.0 (/usr/bin/node)
npminstall@3.2.1 (/usr/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr 
linux x64 4.9.66-1-MANJARO 
registry=http://registry.npm.taobao.org  

这样，后面遇到的 npm 命令我们就可以使用 cnpm 来替代

安装 Vue 命令行工具

$ sudo cnpm install -g vue-cli
Downloading vue-cli to /usr/lib/node_modules/vue-cli_tmp
Copying /usr/lib/node_modules/vue-cli_tmp/_vue-cli@2.9.2@vue-cli to /usr/lib/node_modules/vue-cli
Installing vue-cli's dependencies to /usr/lib/node_modules/vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules/_commander@2.12.2@commander
[2/20] minimatch@^3.0.0 installed at node_modules/_minimatch@3.0.4@minimatch
[3/20] async@^2.4.0 installed at node_modules/_async@2.6.0@async
[4/20] consolidate@^0.14.0 installed at node_modules/_consolidate@0.14.5@consolidate
[5/20] rimraf@^2.5.0 existed at node_modules/_rimraf@2.6.2@rimraf
[6/20] multimatch@^2.1.0 installed at node_modules/_multimatch@2.1.0@multimatch
[7/20] ora@^1.3.0 installed at node_modules/_ora@1.3.0@ora
[8/20] semver@^5.1.0 installed at node_modules/_semver@5.4.1@semver
[9/20] chalk@^2.1.0 installed at node_modules/_chalk@2.3.0@chalk
[10/20] uid@0.0.2 installed at node_modules/_uid@0.0.2@uid
[11/20] coffee-script@1.12.7 existed at node_modules/_coffee-script@1.12.7@coffee-script
[12/20] tildify@^1.2.0 installed at node_modules/_tildify@1.2.0@tildify
[13/20] read-metadata@^1.0.0 installed at node_modules/_read-metadata@1.0.0@read-metadata
[14/20] metalsmith@^2.1.0 installed at node_modules/_metalsmith@2.3.0@metalsmith
[15/20] inquirer@^3.3.0 installed at node_modules/_inquirer@3.3.0@inquirer
[16/20] user-home@^2.0.0 installed at node_modules/_user-home@2.0.0@user-home
[17/20] validate-npm-package-name@^3.0.0 installed at node_modules/_validate-npm-package-name@3.0.0@validate-npm-package-name
[18/20] request@^2.67.0 installed at node_modules/_request@2.83.0@request
[19/20] handlebars@^4.0.5 installed at node_modules/_handlebars@4.0.11@handlebars
[20/20] download-git-repo@^1.0.1 installed at node_modules/_download-git-repo@1.0.1@download-git-repo
Recently updated (since 2017-11-26): 4 packages (detail see file /usr/lib/node_modules/vue-cli/node_modules/.recently_updates.txt)
  2017-12-02
    → request@2.83.0 › har-validator@5.0.3 › ajv@^5.1.0(5.5.1) (20:48:13)
  2017-12-01
    → request@2.83.0 › http-signature@1.2.0 › jsprim@1.4.1 › verror@1.10.0 › extsprintf@^1.2.0(1.4.0) (05:26:44)
  2017-11-28
    → commander@^2.9.0(2.12.2) (15:08:54)
  2017-11-27
    → inquirer@3.3.0 › external-editor@2.1.0 › chardet@^0.4.0(0.4.2) (05:02:03)
All packages installed (253 packages installed from npm registry, used 3s, speed 1.59MB/s, json 235(392.43kB), tarball 4.46MB)
[vue-cli@2.9.2] link /usr/bin/vue@ -> /usr/lib/node_modules/vue-cli/bin/vue
[vue-cli@2.9.2] link /usr/bin/vue-init@ -> /usr/lib/node_modules/vue-cli/bin/vue-init
[vue-cli@2.9.2] link /usr/bin/vue-list@ -> /usr/lib/node_modules/vue-cli/bin/vue-list
$ vue -V
2.9.2

现在就可以使用 Vue 来创建一个项目来试试

$ vue init webpack my-project   

? Project name my-project
? Project description My First Vue Project
? Author snail.zh <snail.zh@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at   https://vuejs-templates.github.io/webpack  
$ cd my-project
$ cnpm install
⠋ [11/33] Installing postcss-loader@^2.0.8platform unsupported babel-loader@7.1.2 › webpack@3.9.1 › watchpack@1.4.0 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(linux)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(linux)
✔ Installed 33 packages
✔ Linked 649 latest versions
✔ Run 1 scripts
Recently updated (since 2017-11-26): 16 packages (detail see file /home/snail/vue-proj/my-project/node_modules/.recently_updates.txt)
  Today:
    → html-webpack-plugin@2.30.1 › html-minifier@3.5.7 › uglify-js@3.2.x(3.2.1) (16:01:10)
    → uglifyjs-webpack-plugin@1.1.2 › uglify-es@^3.2.0(3.2.1) (16:02:11)
✔ All packages installed (747 packages installed from npm registry, used 6s, speed 286.49kB/s, json 682(1.33MB), tarball 274.17kB)
$ cnpm run dev
......
 DONE  Compiled successfully in 2251ms                                 下午 7:41:04

 I  Your application is running here:   http://localhost:8080