Vue.js installation
1. Independent version
We can directly download vue.min.js from the official website of Vue.js and import it with the <script> tag.
2. Use the CDN method
The following are two relatively stable CDNs abroad. I haven’t found which one is better in China. At present, it is recommended to download to the local.
-
Staticfile CDN (domestic) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
Staticfile CDN (domestic)
<div id="app">
<p>{
{ message }}</p>
</div>
unpkg (recommended)
<div id="app">
<p>{
{ message }}</p>
</div>
cdnjs
<div id="app">
<p>{
{ message }}</p>
</div>
3. NPM method
Due to the slow installation speed of npm, this tutorial uses the image of Taobao and its command cnpm. For the introduction of installation and use, refer to: Use Taobao NPM image .
The npm version needs to be greater than 3.0, if it is lower than this version it needs to be upgraded:
# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
It is recommended to use cnpm installation when building large applications with Vue.js:
# 最新稳定版
$ cnpm install vue
command line tool
Vue.js provides an official command-line tool that can be used to quickly build large single-page applications.
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author kxdang <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
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
Enter the project, install and run:
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
After successfully executing the above command, visit http://localhost:8080/, the output is as follows:
**Note:** Vue.js does not support IE8 and below IE versions.
Vue project packaging
To package a Vue project use the following command:
npm run build
After the execution is completed, a dist directory will be generated under the Vue project , which generally contains the index.html file and the static directory. The static directory contains the static files js, css and the image directory images.
If you directly double-click index.html to open the browser, the page may be blank, and you only need to modify the js and css paths in the index.html file.
For example, we open the dist/index.html file and see that the path is an absolute path:
<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
We modify the js and css paths to relative paths:
<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
In this way, double-click the dist/index.html file directly to see the effect in the browser.