Vue安装并创建一个简单项目

1.nodejs安装

下载地址：https://nodejs.org/en/download/

安装完之后cmd 下输入：node -v 查看是否安装成功。

2.查看npm版本

cmd下输入命令：npm -v

如果低于3.0版本需要进行升级

升级方法：

在cmd命令下cd到nodejs安装目录，然后输入以下命令：npm update npm

这里要等待一下。更新完成后再使用：npm -v检查一下版本

3.cnpm安装

cnpm是淘宝的一个镜像，安装之后可以使用cnpm安装命令工具，安装速度会加快。

直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org 命令安装即可。

4.安装vue-cli

安装命令为：cnpm install -g vue-cli

安装之后显示：

一定不要多打空格，我就是因为输入的命令为cnpm install -g vue -cli，多输入了一个空格，而没有安装成功。

这是命令正确时显示的内容：

输入vue -V（后面的V一定要大写），检查是否安装成功。出现版本信息则证明安装成功。

5.新建一个Vue项目

先新建一个存储项目的文件夹，相当于工作空间。此处我新建了一个名为webstormVue的文件夹。进入到此文件夹目录下，在地址栏输入cmd，进入命令窗口。

输入命令：npm install vue-cli -g(下载全局vue-cli)

完成之后，输入命令：vue init webpack dream(dream是项目名)。输入之后：

创建完成之后：

cd firstvue（firstvue是项目名称）

cnpm install

cnpm run dev

可以看到asus文件夹下有咱们刚刚创建的dream项目

访问localhost:8080：

6.使用WebStorm打开项目

使用webstorm软件打开刚刚创建的firstvue项目，项目结构如图所示：

7.项目结构说明

build：项目构建（webpack）相关代码

config：配置目录，包括端口号等

node_modules: npm加载的项目依赖模块

src：开发目录

• assets：放置一些图片
• components：目录里面放了一个组件文件，可以不用
• App.vue：项目入口文件，我们也可以直接将组件写这里
• main.js：项目的核心文件

static：静态资源目录，如图片、字体等。

index.html：首页入口文件，可以添加一些meta信息或统计代码啥的。

package.json：项目配置文件

8.修改代码

接下来修改原始代码，在页面上显示自己想要的内容

1)修改App.vue

<div id="app">
  <img src="static/img/1.jpg">
  <router-view/>
</div>

2)修改HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘My first vue project‘
    }
  }
}
</script>

9.运行