网站开发(二)Vue.js 安装 安装及配置

方法一 独立版本安装

我们可以在Vue.js的官网直接下载:
vue.min.js
并用

方法二 使用 CDN 方法

以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

方法三 利用npm来安装

1.首先先安装Node.Js,安装成功后会自动安好npm和npm的环境。

安装方法请参考:https://blog.csdn.net/zhangshuanlai/article/details/84962481

2.使用淘宝npm镜像

由于npm镜像非常慢,推荐使用淘宝npm镜像,淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
安装命令如下

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

安装成功后就可以用cnpm命令才安装模块了,如下:

cnpm install [name]

3.命令行工具

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
全局安装 vue-cli:

cnpm install --global vue-cli

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

 vue init webpack my-project

这里需要进行一些配置,默认回车即可

C:\Users\Logitech>npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\node_global\vue-list -> C:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue-list
C:\Program Files\nodejs\node_global\vue-init -> C:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue-init
C:\Program Files\nodejs\node_global\vue -> C:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue
+ vue-cli@2.9.6
updated 1 package in 80.007s

C:\Users\Logitech>vue -V
2.9.6

C:\Users\Logitech>vue init  webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob
? Vue build standalone
? Install vue-router? Yes
? 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-project".
# Installing project dependencies ...
# ========================

安装完成后:

C:\Users\Logitech>cd my-project

C:\Users\Logitech\my-project>cnpm install
√ Installed 58 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 72ms(network 56ms), speed 0B/s, json 0(0B), tarball 0B)

C:\Users\Logitech\my-project>cnpm run dev

> my-project@1.0.0 dev C:\Users\Logitech\my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 5147ms                                                                                                               11:07:09

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

进入项目

cd my-project

安装cnpm

 cnpm install

运行网站

cnpm run dev

运行结果如下:在这里插入图片描述
生成的项目位置在 C:\Users\Logitech\my-project
在这里插入图片描述

1:https://vuefe.cn/v2/guide/  vue2.0中文官网(貌似打不开)

2:https://router.vuejs.org/zh-cn/index.html  vue2.0路由中文官网

3:https://github.com/jsfront/src/blob/master/vuejs.md 有一些不错的vue插件,教程,视频和学习资料分享
本文编写参考了:http://www.runoob.com/vue2/vue-tutorial.html

猜你喜欢

转载自blog.csdn.net/zhangshuanlai/article/details/84969697