Vue-cli安装、Vue基本环境搭建

基本环境配置、安装

Windows安装

1、 官网下载nodejs安装包。

node -v查看node版本信息；npm -v 查看npm版本信息。

2、下载完成后点击进行安装，选择And to PATH

3、选择安装路径，完成安装。

4、淘宝NPM安装cnpm（比npm速度快，或者是只能用cnpm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

5、win-R 打开cmd

6、cnpm -v查看版本信息。

7、cnpm install -g vue-cli

-g 代表全局

8、此时输入vue可返回基本信息，此时vue已经成为命令

9、vue init webpack 项目名

10、根据提示输入project name，description，author。后面选项网上资料基本都建议选着no。

11、此时本地夹下已经新建了一个项目。

12、安装依赖，cnpm install，安装完成后所建项目中出现文件夹node_modules。

13、npm run dev，8080端口进入监听状态，有些情况浏览器会自动打开localhost:8080,此时已经能看淡Vue的V了，安装成功。

/

ubuntu安装

sudo apt-get update

sudo apt install nodejs-legacy

node –version

npm-version

vue init webpack 项目名

创建一个完整的Vue实例

引入文件

<script src="vue.min.js></script>      //压缩版
<script src="vue-resource.min.js></script>      //用于后台交互

创建实例

js

var vm = new Vue（{
el:"#app" ,   //模型需要监听的范围，表示id为app的元素内的所有内容都可以被监听
data:{
title:"Hello Vue"
},    //Vue的重点，模型
filter:{
},    //局部过滤器
mounted: function(){
},    //编译完成后默认查询的方法
method:{
}     //所有的事件绑定都在method中绑定
}）;
Vue.filter();    //全局过滤器

HTML
<div id="app">
<p>{{title}}</p>
</div>

显示

Hello Vue