Vue安装及项目搭建

Posted 2020-10-15 Jayer

1.vue安装

1.1、直接<script>标签引入

官网下载地址为：https://cn.vuejs.org/v2/guide/installation.html#AMD-模块加载器

点击开发版本进行下载

1.2、使用CDN方式

• BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
• unpkg：https://unpkg.com/vue/dist/vue.js
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

*虽然还有其它方式，但是对于初学者来说以上两种方式最简单

1.3、NPM方式

打开控制台，输入命令

npm install vue

这样在你的本地就会出现一个名为node_modules的文件夹里面就是vue的项目文件

那么问题来了，安装好了vue怎么进行项目搭建呢？我们就要用到下面的

命令行工具CLI

在控制台中输入如下命令

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目（可选安装目录）
$ vue init webpack my-project
#运行完上面命令会进行一些简单的设置可参照http://www.runoob.com/vue2/vue-install.html
# 安装依赖，进入项目安装并运行
$ cd my-project
$ npm install
$ npm run dev

然后控制台会弹出，表示运行项目成功

DONE  Compiled successfully in 4541ms

 I  Your application is running here: http://localhost:8080

至此vue简单的安装及创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目就完成了～～～