美文网首页
开始学习Vue

开始学习Vue

作者: Kenny技术仔 | 来源:发表于2021-05-24 17:02 被阅读0次

安装Vue.js

方式1

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

方式2

通过CDN加载Vue.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

    安装Vue.js 方式1 下载Vue.js通过script标签引入。下载地址:https://vuejs.org/...

  • 月薪80K前端大佬笔记学习vue的心得,网友:两个字“完美”!

    废话不多说了,我们开始吧! 首先介绍下,我是如何学习vue的,我学习vue之前,做过哪些思考? 1.vue技术刚出...

  • 月薪80K前端大佬笔记学习vue的心得,网友:两个字“完美”!

    废话不多说了,我们开始吧! 首先介绍下,我是如何学习vue的,我学习vue之前,做过哪些思考? 1.vue技术刚出...

  • Framework Vue 框架

    本文适合想学习vue框架和webpack打包的童鞋,下面开始开发旅程: Framework Vue Vue.js是...

  • 开始学习 Vue(一)

    前言 最近因为工作的需要,也因为要跟上时代的潮流,决定在当前的项目里引入 vue,因此专门开启一个模块文集来做学习...

  • vue3 .0的体验

    随着vue 3.0 的正式发布,也要开始学习和体验vue 3 和typescript 的技术了 1 vue 3.0...

  • 开始接触vue是看的vue1.0的文档,后面发现2.0的也早出来了,就直接开始学习vue2.0了。在实践项目之前,...

  • 001、Vue -- MVVM

    在正式开始学习vue之前,需要先了解什么是MVVM,虽然Vue没有完全遵循 MVVM 模式, 但Vue 的设计无疑...

  • VUE学习整理_003

    windows下VUE2.0环境搭建 前两篇记录了vue学习的一些大背景,现在开始回归到vue本身。 当然学习vu...

  • 2018-10-14

    完成了宝联灯后台页面,开始学习vue框架

网友评论

      本文标题:开始学习Vue

      本文链接:https://www.haomeiwen.com/subject/fzsnjltx.html