Vue的开发环境搭建

Nodejs安装

可以在下面的网站下载安装包：
https://nodejs.org/en/download/
在这里插入图片描述

我用的是这个版本，windows系统64位的。
运行安装包，选择相关的路径，主要注意点如下选择add to path,因为这样会自动给你配置对应的环境变量，其余的都是直接下一步下一步然后install：

想要检验是否安装成功可以执行两个命令node -v 和npm -v(这个主要高版本的nodejs会在安装的过程中自动帮你安装的，主要的作用是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西) 分别查看版本信息。
PS:如果版本低于3.0，则需要输入cnpm install npm -g进行版本的提升。

Nodejs使用前的准备工作

1.在安装目录D:\Program Files\nodejs下创建两个文件夹node_global和node_cache，主要防止执行其他安装命令时候将东西安装在C盘里面，希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中。
在这里插入图片描述
2.新建文件后在执行命令行cmd，然后执行下面两个语句

    npm config set prefix "D:\Program Files\nodejs\node_global"
    npm config set cache "D:\Program Files\nodejs\node_cache"

3.接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，系统变量下新建NODE_PATH，填写好对应的路径：
在这里插入图片描述
修改默认的用户变量D:\Program Files\nodejs\node_global：

安装vue-cli脚手架

CLI是Command Line Interface的简写。用来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。

1、安装全局的脚手架，用于全局的模板的建立

$ cnpm install -g vue-cli
# 回车，等待安装...
$ vue
# 回车，若出现vue信息说明表示成功

2、利用vue-cli的脚手架进行项目模板的构建

首先选择一个你保存Vue项目的位置，利用cmd进入该目录下，在cmd下输入以下命令,构建Vue项目的模板:

vue init webpack my-project

在构建的时候，回发现停止，原因是需要你手动建立給信息，你只需要按回车键就行，出现以下信息就表示构建完成：
在这里插入图片描述
这样可以按照它的提示，在命令行输入

cd my-project
npm run dev

访问它提示的地址，就可以查看你创建的项目：
在这里插入图片描述

3、安装依赖

模板安装完成后利用cmd进入所建的vue项目模板，输入以下指令：

cnpm install

安装node_module

4、运行项目

安装完成后输入

 npm run dev

运行Vue项目，项目跑起来后，在浏览器输入localhost:8080,出现以下信息表示项目运行成功。

开发工具Visual Studio Code的安装

开发工具我们推荐使用Visual Studio Code，可以直接在官网上下载使用：
https://code.visualstudio.com/
在这里插入图片描述
这个开发工具有很多优点，比如能够使用自定义编辑器改变布局，图标，字体和配色方案；支持插件的扩展，说到插件，顺便再推荐几个前端使用Angular框架开发常用的插件吧：

Auto Close Tag：可以自动添加HTML/XML关闭标签
Chinese (Simplified) Language Pack for Visual Studio Code：中文语言包
Debugger for Chrome：使用谷歌浏览器进行调试
scss-lint：保存scss文件时，通过下划线和/或突出显示scss文件中的错误

修改Vue项目示例

这里，我们在已经搭建好的vue项目中，实现一个从项目已有的Hello World! 跳转至我们自己创建的HelloVue组件页面的例子。
在这里插入图片描述
1）首先，在已经搭建好的环境的components下新建一个vue文件，作为我们自己的vue组件。

2）然后在HelloVue.vue文件中添加以下代码，vue文件的格式分为三个模块，如下图所示，首先时template模板，然后是script标签及代码，最后是style样式。

<template>
  <div id="vue">Hello Vue.js!{
    
    {
    
    message}}</div>
</template>

<script type="text/javascript">
export default {
    
    
  // 这里需要将模块引出，可在其他地方使用
  name: 'HelloVue',
  data () {
    
    
    // 注意：data即使不需要传数据，也必须return,否则会报错
    return {
    
    
      message: '你好使用者！'
    }
  }
}
</script>

<style type="text/css">
#vue {
    
    
  color: green;
  font-size: 28px;
}
</style>

3）在项目搭建时生成的HelloWorld.vue文件中的template中添加一个链接，用于跳转至我们自己的组件内容。

<h1>
 <router-link to="day01">跳转至HelloVue</router-link>
</h1>

在这里插入图片描述
关于 router-link 的使用，请参考 vue-router文档。

4）接着，我们修改项目中的router目录下的index.js文件，这是一个vue-router的简单应用。对于路由，我们一般会想到宽带安装时我们使用的路由器，这里的路由主要是为了定义页面之前的跳转。在router下的index.js文件中添加以下代码：
在这里插入图片描述
注意：这里的mode: ‘history’ 作用参考vue-router文档。