vue的template的插值语法中显示字符串带引号怎么去除

Vue起步——环境搭建和简单示例

• Vue的开发环境搭建

• Nodejs安装
• 安装vue-cli脚手架

• 1、安装全局的脚手架，用于全局的模板的建立
• 2、利用vue-cli的脚手架进行项目模板的构建
• 3、安装依赖
• 4、运行项目

• 开发工具Visual Studio Code的安装
• 修改Vue项目示例

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框架开发常用的插件吧：

1. Auto Close Tag：可以自动添加HTML/XML关闭标签
2. Chinese (Simplified) Language Pack for Visual Studio Code：中文语言包
3. Debugger for Chrome：使用谷歌浏览器进行调试
4. 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文档。

5）最后，在VS code中运行

npm run dev

启动调试，就可以看到效果了。