安装方法1:<script> 标签引入
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。Vue 会被注册为一个全局变量。
vue.min.js的版本
开发版本:包含完整的警告和调试模式
生产版本:删除了警告,24.72kb min+gzip
重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。(开发环境不要用最小压缩版,不然就失去了错误提示和警告!)
安装方法2:使用 CDN 方法
unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览 npm 包资源。
也可以从 jsdelivr 或 cdnjs 获取,不过这两个服务版本更新可能略滞后。
安装方法3:vue-cli脚手架安装
在用 vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。
vue-cli脚手架概述:Vue提供的脚手架工具,脚手架就好比建筑的时候的架子,帮助工人完成工程,vue的脚手架能生成目录结构、本地开发调试、代码压缩部署、热加载、单元测试
使用vue-cli脚手架的优势:成熟的vue项目架构设计;本地服务器测试;集成打包上线
安装以及创建项目的流程图
安装步骤:
安装npm
查询npm的版本——npm -v
安装最新版本——npm i npm g
安装webpack
查看webpack版本——webpack -v
安装webpack(全局安装)——npm install webpack -g
安装vue.js
查看vue.js 的版本——vue -V (注意后面的V是大写的,需要安装完cue-cli脚手架之后才能查看的到)
安装最新vue.js——npm install vue g
安装vue命令行工具(vue-cli脚手架)
vue-cli脚手架安装:npm install -g vue-cli
创建项目第一步:首先进入需要创建项目的目录里面
创建项目:
第一步:Project name: 项目的名称(项目名不能大写)
第二步:Project description:项目的描述
第三步:Author:项目的作者(会自动生成到package.json文件里)
第四步:Vue build:这里有两个选项,第一个选项是运行时编译,可以不基于.vue开发,第二个选项是基于.vue开发比第一个小6kb
第五步:install vue-router:是否安装路由中间件
第六步:是否需要ES6代码风格检查器 选择YSE之后,有三个选项,第一个标准的(选择标准的直接回车即可)
第七步:是否需要测试相关
第八步:也是测试相关
安装package.json中的插件
也就是项目中需要的中间件,进入项目文件夹里,然后输入命令
npm install
安装完之后在项目文件夹中多了一个文件夹叫node_modules的目录
启动运行项目
启动之前先进入项目目录下,在命令行输入npm run dev 然后回车,在浏览器中输入http://localhost:8080
出现下面这个页面表示vue这个项目已经安装完成,并且项目启动成功
使用webStrom启动项目:在项目里面点击package.json文件
然后右键,点击show npm Scripts
能在浏览器打开看到这个表示启动成功
其实启动过程就是运行package.json文件里面的