【Vue.js】Vue.js项目构建

安装vue-cli：

>> cnpm install --global @vue/cli

测试vue-cli安装成功：

>> vue -V
@vue/cli 4.5.4

命令行构建Vue.js项目步骤：

>> vue create lk-demo

Babel：ES6/7/8向ES5转换工具 TypeScript：支持使用TypeScript书写源码 Progressive Web App (PWA) Support：PWA支持，PWA不是API或技术，它是一种Web开发方法，它使用已有的工具和技术组合来创建有针对性的理想的用户体验，构建渐进式的网络应用程序 Router：支持vue-router Vuex：支持Vuex CSS Preprocessors：支持CSS预处理器 Linter/Formatter：支持代码风格检查和格式化 Unit Testing：支持单元测试 E2E Testing：支持E2E测试

启动npm服务：

>> npm run serve

Vue.js项目的index.html页面如下：

Vue.js项目中的.vue文件分为三部分，符合MVVM模式。template做页面View展示；script的data部分为Model数据存储；script整体作为ViewModel，用于和View，和Model的双向绑定；style部分是样式文件。 Vue.js项目的App.vue是组件入口文件，main.js是整个工程的入口文件，index.html是项目的主页面，package.json存放项目的依赖。

Vue.js项目自带的App.vue代码如下：

<template>
	<div id="app">
	    <img alt="Vue logo" src="./assets/logo.png">
	    <h2>{{message}}</h2>
	    <HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'
	
	export default {
	    name: 'App',
	    components: {
	        HelloWorld
	    }
	    data: {
	    	return {
				message: 'Hello, MyWorld'
			}
	    }
	}
</script>

<style>
	#app {
	    font-family: Avenir, Helvetica, Arial, sans-serif;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    text-align: center;
	    color: #2c3e50;
	    margin-top: 60px;
	}
</style>