En primer lugar, el uso vue-CLI crear un proyecto de plantilla
1] es una herramienta oficial de andamios vue vue-cli (una biblioteca)
http://www.github.com/vuejs/vue-cli
Crear un proyecto de vue 2]
NPM instalar -g vue-cli (Nota: Sólo es necesario instalar andamios)
vue init webpack vuedemo (Nota: la plantilla webpack, plantilla proporciona seis elementos seleccionables)
(Se le pedirá una serie de preguntas, la primera pregunta debe ser nombre en minúsculas, sin necesidad de instalar vue-router, dos unidades no tienen que probar el paquete)
cd vuedemo
NPM instalar
NPM dev plazo
Visita: http: // localhost: 8080 /
En segundo lugar, la preparación de andamiaje basado en proyectos
archivo en formato .vue 1] componente de
//文件名格式为App.vue
<template></template>//写html
<script></script>//写js
<style></style>//写css
2] Los pasos básicos
① Crear una nueva carpeta en el archivo src componente raíz denominado: 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>
② en la carpeta src en la carpeta de nuevos componentes, entonces la carpeta para crear una nueva sub-conjunto, llamado: 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>
③ en la carpeta src También es necesario crear un archivo 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生命周期中有定义
})
En tercer lugar, el envasado y la publicación de los proyectos
1] Packaging:
NPM acumulación de ejecución
2] Release 1: El uso conjunto de herramientas de servidor estático
NPM instalación -g sirven
servir dist (producirá una nueva carpeta dist)
Visita: http: // localhost: 5000
3] Publicado 2: Uso de un servidor web dinámica (Tomcat)
① modificar la configuración: webpack.prod.conf.js
salida:{
publicPath: '/ xxx /' // nombre de la carpeta empaquetado, nombre del proyecto que se publicará
}
// Si tiene que utilizar una publicación de servidor estático recuerde que necesita este paso para ser restaurado, reenvasado
② reenvasado:
NPM acumulación de ejecución
③ modificar la carpeta dist para Nombre del proyecto: xxx
④ xxx copia en el directorio webapps de Tomcat en ejecución bajo
⑤ visita: http: // localhost: 8080 / xxx
Cuatro, ESLint de codificación estándar de inspección
1] es herramienta de comprobación de un código ESLint spec
2] Se define una serie de normas específicas, una vez que su código viola una regla, ESLint hará consejos muy útiles
3] sitio web oficial: http: //eslint.org/
4], ha sustituido a la anterior JSLint básico
