First, the use vue-cli create a template project
1] is a vue vue-cli official scaffolding tool (a library)
http://www.github.com/vuejs/vue-cli
Create a project vue 2]
npm install -g vue-cli (Note: only need to install scaffolding)
vue init webpack vuedemo (Note: webpack template, template provides six selectable items)
(It will prompt a few questions, the first question must be lowercase name, no need to install vue-router, two units do not need to test the package)
cd vuedemo
npm install
npm run dev
Visit: http: // localhost: 8080 /
Second, the preparation of project-based scaffolding
.vue format file 1] component of
//文件名格式为App.vue
<template></template>//写html
<script></script>//写js
<style></style>//写css
2] The basic steps
① Create a new folder in the root component src file named: App.vue
<!--根组件-->
<template>
<div>
<img class="logo" src="./assets/logo.png" alt="logo">
<!--3.使用组件标签-->
<HelloWorld></HelloWorld>
</div>
</template>
<script>
//1.引入组件
import HelloWorld from "./components/HelloWorld";
export default {
//2.映射组件标签
comments:{
HelloWorld
}
}
</script>
<style>
.logo{
width: 200px;
height: 200px;
}
</style>
② in the src folder under the new components folder, then the folder to create a new sub-assembly, called: HelloWorld.vue
<!--子组件-->
<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template>
<script>
export default {//配置对象（与Vue一致）
data(){//data必须是一个函数
return {msg:'helloworld'}
}
}
</script>
<style>
.msg{
color: red;
font-size: 30px;
}
</style>
③ in src folder also need to create a file main.js
/*
入口JS：创建Vue实例
*/
import Vue from 'vue'
import App from "./App"
new Vue({
el:'#app', //是根据index.html里面的div的id值
components:{
App
},
template:'<App/>' //模板：vue生命周期中有定义
})
Third, packaging and publishing projects
1] Packaging:
npm run build
2] Release 1: Use static server toolkit
npm install -g serve
serve dist (will produce a new folder dist)
Visit: http: // localhost: 5000
3] Published 2: Using a dynamic web server (tomcat)
① modify the configuration: webpack.prod.conf.js
output:{
publicPath: '/ xxx /' // packaged folder name, project name to be published
}
// If you have to use a static server publishing remember this step needs to be restored, repackaging
② repackaging:
npm run build
③ modify the dist folder for Project Name: xxx
④ xxx copied to the webapps directory under Tomcat running
⑤ visit: http: // localhost: 8080 / xxx
Four, ESLint coding standard inspection
1] is a code ESLint spec check tool
2] It defines a number of specific rules, once your code violates a rule, ESLint will make very useful tips
3] official website: http: //eslint.org/
4] has replaced the previous basic JSLint
