Node环境创建Vue项目

使用Node环境创建Vue项目

# 最好都在管理员身份下运行
npm install -g @vue/cli			# 全局安装 vue脚手架
vue create hello				# 在当前目录下创建 Vue 项目

es6中的模块语法

安装live server插件

// 第一种用法
export const name = '张三';
export const age = 18;
export function sayName(){
    return 'my Vue';
}
/*等价于
const name = '张三';
const age = 18;
function sayName(){
    return 'my Vue';
}
export{
    name,age,sayName
}
*/

如何使用：

    <script type="module">
    	// from 后指定需要导入模块的路径.
    	// 如果只有模块名,不带有路径,需要有配置文件指定.
        import {name,age} from './demo.js'		// 这里进行按需引入
        console.log(name);
        console.log(age);
    </script>

解构赋值

let node = {
	type:'iden',
	name:'foo'
}
let {type,name} = node;
console.log(type,name);

Vue 文件没有高亮

在 Vscode 中 settings.json 中编辑：

    "files.associations": {
        "*.vue": "html"
      }

vue-cli 创建项目慢的解决方法
如果以vue的js文件进行导入的话，data的值是一个对象，但是基于Node的话，data的值是一个函数

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 使用 HelloWorld 组件 -->
  <HelloWorld msg="Welcome to Your Vue.js App一幅画v4"/>
  <div>
    <h1 :title="message">{{message}}</h1>
    <button @click="sayHi">nihaonfsdfs</button>
  </div>
</template>

<script>
  // 引入组件
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    name: 'App',
    // 注册组件
    components: {
      HelloWorld
    },
    // 数据保存在return的对象中
    data:function(){
      return{
        message:"hello first try",
        isLogin:false,
        fruits:["香蕉","苹果","鸭梨"]
      }
    },
    // 方法
    methods:{
      sayHi:function(){
        alert("hi")
      }
    }
  }
</script>