vue-cli2静态文件引入

最近在整一个vue的项目，用的是vue-cli2的框架，由于之前接触了部分，还有很多未知，自己用写一个html页面，整合进vue组件中，频繁报错，主要遇到了几个问题：

1. vue-cli2中单独写的css文件不知道怎么引入。
2. vue-cli2中单独写的js文件不知道怎么引入。
3. html内容复制到vue组件的template中报错。
4. html页面中meta标签不知道放到哪里，因为是做的移动端页面，所以meta需要配置一下，但是不知道meta标签放到vue页面的那个地方。
5. 不知道怎么修改input的type属性。
6. style标签中加了 scoped以后，css样式直接用标签元素会失效，只能用选择器代替。比如给body添加样式，平时是body{color:red}，这样是不行的，必须给body添加一个选择器，class或者id，然后再选择器里面添加样式即可。

以上就是我将html页面整合进vue页面中报的一系列的错误，在百度和众位的帮助下解决完以后，对vue理解的深入的一点就是，vue-cli2中有一个index.html文件，以前写的所有的html页面都是以这个为基准的，然后其他页面都是放在vue页面中，但是其实是vue页面嵌入到了这个index.html文件中。其他的该怎么操作就怎么操作。vue页面中可以单独引入自己需要的js和css样式，可以将js对dom元素的操作替换。

• vue-cli2中vue页面中单独引入
  
• js文件引入

这是引入的外部js文件，自己写的
function login(){
  console.log('test is login')
}
export {
  login
};

在vue页面中调用是这样

 import {login} from '../assets/js/login'
    export default {
        name: "Login",
        methods:{
        created:function () {
          login();
        }
    }

• html内容复制到vue组件的template中报错。
  这个主要是将html内容放到vue页面的template中必须要用一个div包着，否则就会报错。
  比如下面就会报错，只有将h1标签放入div中才不会报错。
  

• html页面中meta标签不知道放到哪里，因为是做的移动端页面，所以meta需要配置一下，但是不知道meta标签放到vue页面的那个地方
  将meta标签放入vue-cli2中生成的index.html页面即可，如下所示：
  
  上面提到，如果实在需要给body标签添加样式，我是直接在index.html中添加的，亲测有效。

• 不知道怎么修改input的type属性。
  需要将密码框明文和暗文显示，需要修改input的type属性，代码如下所示：想了想为了以后方便观看，就贴了所有代码好了。