开始学习Vue

安装Vue.js

方式1

下载Vue.js通过script标签引入。下载地址:https://vuejs.org/js/vue.min.js

方式2

通过CDN加载Vue.js

  • 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

方式3

通过NPM安装Vue.js,npm的版本要大于3.0版本
全局安装 vue-cli
cnpm install --global vue-cli

vue-cli2.x及Vue-cli3.x是不一样的。
vue-cli2.x创建一个基于 webpack 模板的新项目
vue init webpack my-project
vue-cli3.x创建一个基于 webpack 模板的新项目
vue create my-project
均根据提示创建一个简单的项目即可。
vue-cli2.x生成项目运行方法:

cd my-project
npm install 
npm run dev 

vue-cli3.x生成项目运行方法:

cd my-project
npm install 
npm run serve

项目运行在:http://localhost:8080

vue-cli2.x及vue-cli3.x的区别:

1.创建方式
vue-cli2.x:
vue init webpack 2.0projectName
vue-cli3.x:
vue create 3.0projectName
2.启动打包方式
vue-cli2.x:
npm run dev
vue-cli3.x:
npm run serve
3.目录结构
vue-cli2.x:

├─build
├─config
├─node_modules
├─src
│  ├─assets
│  ├─components
│  └─router
├─static
└─test
    └─unit
        └─specs

vue-cli3.x:

├─public
└─src
    ├─assets
    ├─components
    ├─router
    ├─store
    └─views

可以看出vue-cli3.x后取消了config、build、static、test目录。在文件上vue-cli3.x也没有了Vue.config.js文件,需要可以创建。

你可能感兴趣的:(开始学习Vue)