目 录
目 录............................................................................................................................... I
1.1 vue.js框架是干什么的.............................................................................................. 2
1.2 如何使用vue.js......................................................................................................... 2
1.3 Vue使用npm方式安装............................................................................................ 3
- vue.js框架是干什么的
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
(“渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我一点就必须用我的所有部分。”
“我觉得它与其他框架的区别就是渐进式的想法,一步一步，不是说你必须一竿子把所有的东西都用上。”---尤雨溪)
- 如何使用vue.js
方法1.
1.下载 vue.min.js 并用 <script> 标签引入。
2.初始并实例化vue
3.将html中的需要显示的元素用vue中的属性代替。
例如：
正在上传…重新上传取消
说明：IE8及IE8以下版本不支持Vue
方法2.
安装vue
- Vue使用npm方式安装
使用命令：cnpm install vue安装最新版本vue
注意：npm的版本需要大于3.0，如果版本低需要升级。
查看npm版本的方法：npm -v
升级npm：cnpm install npm -g
要安装vue 需要用npm来装，npm是nodejs的工具，所以先安装nodejs
1、
安装nodejs（JavaScript的运行环境，和java的jvm类似）
sudo apt-get install nodejs
#验证安装成功
node –v
2、安装cnpm
开发中，需要node的“包”,在服务器A上，nmp就连接到A是管理这些“包”安装到本地node环境的工具。但是npm的“包”在国外服务器，下载慢。
国内就把A上的包，复制到国内服务器B上（镜像），用一个工具来管理，就是cnmp。
nmp ------------>国外服务器A--------> “包”
cnmp-----------à国内服务器B-------à “包”
正在上传…重新上传取消
2、安装cnpm
先安装npm
sudo apt-get install npm
再借助npm安装cnpm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
步骤三：安装Vue
（安装完了 node环境，nmp包管理工具，下面就轮到安装Vue框架了—其实就是把vue.js 部署到node环境下的目录node_modules,所以非常快）
输入$ cnpm install vue ，回车等待终端给出响应
步骤四：安装全局vue-cli脚手架
vue-cli 就是利用vue创建工程的工具
sudo cnpm install --global vue-cli
输入$ vue -V检查是否安装成功
- 创建一个基于webpack模板的新项目
1、创建模板新项目
vue init webpack my-project
正在上传…重新上传取消
cd 到你新建的工作目录
正在上传…重新上传取消
2、安装项目所需依赖
$ cd my-project
$ cnpm install
启动
$ cnpm run dev
转存失败重新上传取消
转存失败重新上传取消
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
转存失败重新上传取消
- 发布项目
大家好，这节我们主要讲解项目的发布，其实很简单，没有大家想的那么复杂，具体如下操作。
一、创建VUE项目
首先我们需要创建VUE项目，创建项目的代码如下：
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
项目截图如下：
转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消
二、项目打包
在打包之前需要修改一个地方，那就是config->index.js文件，修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下：
转存失败重新上传取消
//上面文件改好后，开始打包，执行如下命令：
npm run build
转存失败重新上传取消
打包后，项目目录下会生成dist文件夹，这就是我们的整体项目。如图所示：
转存失败重新上传取消
三、发布
最后一步就简单了，直接把 dist 目录丢到服务器就可以了，是不是很简单。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
遇见错误：
ENOENT: no such file or directory, access '/usr/local/lib/node_modules/vue-cli/node_modules/get-s...
ENOENT: no such file or directory, access '/usr/local/lib/node_modules/vue-cli/node_modules/get-s... - 腾讯云开发者社区-腾讯云
vue发布
vue打包问题：Tip: built files are meant to be served over an HTTP server.
npm run build之后，出现提示：Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
npm run build的时候 , 因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:
npm install -g http-server
1、使用命令npm run build打包vue项目之后提示 ：
“Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won’t work.”，
并且在本地打开index.html是空白页，是因为打包的时候配置文件config的index.js的build配置是默认assetsPublicPath为“/”根路径，把assetsPublicPath修改为“./”同一个路径重新打包即可。
2、解决了页面空白问题之后会出现css样式的图片不显示问题，那么在build的目录下的utils.js文件添加publicPath: '…/…/'重新打包即可。
