Vue2.5笔记:如何在项目中使用和配置Vue
最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。
<script src="../xxx.js"></script>
Vue 我们也可以这种引入的方式
<div id="root">{{name}}</div>
<script src="./dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#root',
data: {
name: 'Vue'
}
})
</script>
随着前端的发展我们出现了模块化的开发方式,例如异步(AMD)、同步(CommonJS)等等。
在我们正式开始 Vue 项目开始的时候,我们现在安装一个 Vue Devtools 一个官方的 Vue 调试 chrome 插件,安装之后我们在 chrome 的控制台就可以看到我们创建的 Vue 的对象实例。
Vue-CLI
Vue 给我们提供了上述所有方式的项目引入方式,不但如此,Vue 还给我们提供了一个目前非常流行,非常牛逼的脚手架(Vue CLI )工具,它能在短短的几分钟之内就能构建一个完整的单页面应用 (SPA)项目。其中包含:热加载、校验、打包等构建项目等工具;下面我们来一步一步的构件一个新的项目。
安装工具
//npm
npm install -g @vue/cli
//yarn
yarn global add @vue/cli
安装完成以后我们验证下有没有安装成功,执行下面命令后如果安装成功后,会显示版本号,我安装的版本是 3.0.4
vue --version
如果你和我一样恭喜你你安装成功了,如果没有安装成功你可以查看下权限的问题或者该用 cnpm 试试。
安装成功之后,我们执行以下命令就可以创建一个完整的项目案例。
vue create my-project
执行上述命令以后,会让我们选择是按照默认(default)的配置,还是选择执行配置,如果你已经非常熟悉了脚手架工具或者默认的配置你满足不了你的需求,你可以选择自己行配置,不过这里还是建议不太熟悉的同学还是使用默认配置就行。
等待安装完成之后,我们执行下面命令就可以看到我们的初始化项目了。
cd my-project
npm run serve
我这里给的是 8080 端口,我们本地访问 localhost:8080 查看我们的初始化项目
是不是很酷,我们的第一个项目已经就这样创建完成,接下来我们就慢慢的去开始我们的项目开发吧。加油!
Vue2.5笔记:如何在项目中使用和配置Vue的更多相关文章
- 我在项目中是这样配置Vue的
启用压缩,让页面加载更快 在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对代码进行混淆压缩,只为了让 ...
- [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置
第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...
- Cocos2dx 学习笔记整理----在项目中使用图片(三)
这节练习下DragonBones. 手机由于性能所限,需要特注意资源的使用. 游戏项目的话由于资源比较多,一般都会用到DragonBones来做动作,这个又称为龙骨. DragonBones传送点:h ...
- Cocos2dx 学习笔记整理----在项目中使用图片(一)
cocos2dx有多种使用图片的方法,先来个最简单的:用CCSprite直接使用图片. 首先,进入到之前建立的项目,把你将要使用的图片放入到目录下的Resources文件夹里面.项目中以相对路径使用资 ...
- Vue笔记:在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- 从零开始学 Java - log4j 项目中的详细配置
你还会用笔来写字么 我是不怎么会了,有时候老是拿起笔之后不知道这个字怎么写,这时候就会拿起手机去打出来:有时候还会写出来这个字之后越看越不像,这时候就开始怀疑自己的能力了:有时候写出来了一大堆字之后, ...
- Spring + SpringMVC + Mybatis项目中redis的配置及使用
maven文件 <!-- redis --> <dependency> <groupId>redis.clients</groupId> <art ...
- vue项目中vscode格式化配置和eslint配置冲突
问题描述 使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行.空格.单双引号.分号等各种格式问题 因为我的 vscode 安装使 ...
- 在dotnetcore的MVC项目中,创建支持 vue.js 的最小工程模板
网上Vue模板不是最新的,我自己做了一个最新的支持 Vue.js 的最小工程模板,方便大家从 Hello world. 入门, 在 VS2017 里学习,并扩展出自己的项目. 下面是创建步骤: 1.在 ...
随机推荐
- [Swift]LeetCode97. 交错字符串 | Interleaving String
Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. Example 1: Input: s1 = ...
- [Swift]LeetCode326. 3的幂 | Power of Three
Given an integer, write a function to determine if it is a power of three. Example 1: Input: 27 Outp ...
- [Swift]LeetCode354. 俄罗斯套娃信封问题 | Russian Doll Envelopes
You have a number of envelopes with widths and heights given as a pair of integers (w, h). One envel ...
- [Swift]LeetCode971.翻转二叉树以匹配先序遍历 | Flip Binary Tree To Match Preorder Traversal
Given a binary tree with N nodes, each node has a different value from {1, ..., N}. A node in this b ...
- SpringBoot 集成Mybatis 连接Mysql数据库
记录SpringBoot 集成Mybatis 连接数据库 防止后面忘记 1.添加Mybatis和Mysql依赖 <dependency> <groupId>org.mybati ...
- python数组并集交集补集
并集 a = ["a", "b", "c", "d"] b = ["b", "e" ...
- 【Maven】---Linux搭建Nexus3.X私服
Linux搭建Nexus3.X私服 备注:linux版本: ubuntu 同时已经部署好JDK8环境 一.linux安装nexus 1.创建文件夹并进入该目录 cd /usr/local && ...
- D3、openlayers的一次尝试
近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...
- DOM事件第一弹
近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充. 一.事件类型 参数 事件接口 初始化方 ...
- 【朝花夕拾】Android性能篇之(一)序言及JVM
序言 笔者从事Anroid开发有些年头了,深知掌握Anroid性能优化方面的知识的必要性,这是一个程序员必须修炼的内功.在面试中,它是面试官的挚爱,在工作中,它是代码质量的拦路虎,其重要 ...