方法一 独立版本安装
我们可以在Vue.js的官网直接下载:
vue.min.js
并用
方法二 使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
- Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
可以如下引用到script标签中:
方法三 利用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