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 查看咱们的初始化项目

是否是很酷，咱们的第一个项目已经就这样建立完成，接下来咱们就慢慢的去开始咱们的项目开发吧。加油！