如何在项目中初始化使用和配置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 给我们提供了上述所有方式的项目引入方式，不但如此，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 查看我们的初始化项目

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

如何在项目中初始化使用和配置Vue原创