Série vue - vue2-webpack2Caminho para erros ao configurar a estrutura do framework

react, vue, angular representam3A ideia de engenharia frontend, aprender três principais frameworks é entender seus conceitos centrais, como componentes, ciclo de vida, fluxo de dados unidirecional, vínculo bidirecional, etc. Esses conceitos são raramente pensados de maneira sistemática no desenvolvimento não-baseado em frameworks, para iniciantes, muitos conceitos não foram expostos e não sabem por onde começar um projeto react, vue ou angular, a seguir, vou construir um projeto vue do zero, aprendendo a ideia de vue enquanto faço o projeto.

1、O que devo fazer primeiro para usar vue?

Para aprender vue, a primeira coisa que devo fazer é ir ao site oficial do vue e ler a introdução:https://cn.vuejs.org/v2/guide..., ao olhar de perto, o vue agora tem1.X e2X e .X diferem, muito bem, decidi escolher2.X。

Escolhi a versão vue, busquei no Zhihu sobre como configurar o framework vue, vi várias partilhas de antigos, e aprendi sobre um chamado cooking O que é tão bom?

O objetivo da cooking é libertá-lo das configurações de construção complexas, ao mesmo tempo em que elimina a inconveniência de instalar várias dependências de desenvolvimento em cada projeto. Baseado no webpack, mas com opções de configuração mais amigáveis e um mecanismo de configuração de extensão fácil de usar, permitindo que você se concentre no projeto e esqueça a configuração.

Uau, vi a introdução da cooking oficial tão boa, decidi seguir suas instruções, experimentei um pouco, achei que não estava satisfeito, a configuração de ambiente em um clique parece muito alta e elegante, mas ainda preciso aprender a usar a cooking e instalar a cooking localmente, o que me deixa confuso, embora tenha acessado a página da web no navegador com sucesso, ainda assim, abandonei essa coisa divertida.

Neste momento, só pode começar a construir o projeto do zero.

2、Criar um novo vue no github2-Projeto web.

Abra a página inicial do github, clique em start a project.

Em seguida, você verá Criar um novo repositório, será necessário preencher as informações do projeto, essa etapa pode ser pular.

Depois disso, o projeto está pronto, clone para o local.

3、Inicializar o npm

Use o shell ou cmd para entrar no diretório raiz do projeto e executar o comando a seguir, pule as opções, e finalmente será gerado o arquivo package.json.

npm init

4、Instalar o webpack

A sensação de não poder viver sem o webpack, mas configurar o webpack também pode fazer a vida difícil, é muito difícil lembrar das opções de configuração do webpack, mas não se preocupe, eu já acabei com essa etapa, todos precisamos usar o webpack2啊。

npm install --save-dev webpack

还需要前端服务器，做热更新呀，webpack-dev-server登场。

npm install --save-dev webpack-dev-server

5、创建webpack.config.js文件

和react中的webpack配置文件没什么区别，只是稍微改动一个地方即可移植过来使用。

千万不要把js和vue放到一起，不起作用的，必须分开，必须，这个坑我已经踩过了，为了找这个坑，浪费了我好几个小时，最最最隐蔽的一个地方。

rules: [{
    /\.js$/
   loader-include: resolve('src')
    /babel é indispensável, note que aqui não estamos usando o React, mas o Vue, incluindo os seguintes plugins, flow/
   vue, transform
  exclude:
    /node_modules/
   -include: resolve('src')
    /babel é indispensável, note que aqui não estamos usando o React, mas o Vue, incluindo os seguintes plugins, flow/
   vue, transform
  },

6jsx.

"presets": ["es-"flow"-vue-

{
 "stage"2015vue-"stage"-0-2"]
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7adicionar o comando start no package.json

Use diretamente o webpack-dev-O servidor do server foi iniciado, uau, uma série de erros foram relatados, dizendo que falta algum module, isso é simples, porque muitos modules são referenciados no arquivo de configuração, mas ainda não foram instalados no projeto. Neste momento, instale um a um.

"start": "webpack-dev-server",

8arquivo de entrada do projeto main.js.

O nome deste arquivo pode ser o que você quiser, o código é bem simples, instanciar um Vue e um roteador, não parece muito parecido com o arquivo de entrada do React? Claro, eu estou usando um SPA, então estou usando a forma de entrada única. Se não for o modo SPA, não será dessa maneira.

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //Registro de solicitação HTTP
Vue.use(VueRouter); //Registro de roteamento
// Instanciando roteamento
const router = new VueRouter({
 // mode: 'history', //H5 Modo de roteamento, precisa de renderização do lado do servidor para evitar404Erro
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  Não obrigatório
//  module.hot.accept('./App.vue', () => render);
// }

9, roteamento routes.js

O roteamento e o React são muito semelhantes (quase idênticos), as páginas Vue aqui são escritas com sufixo .vue.

import Home from './components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

10, contêiner superior de página única App.vue

De index para este arquivo, comecei a aprender a essência do Vue.

template: linguagem de modelo do Vue, também conhecida como jsx.

transition: animação de transição.

router-view: contêiner de exibição de roteamento, através de router-link de navegação carregado.vue será renderizado neste contêiner. router-link foi encapsulado no componente nav.vue.

script: importei os componentes Vue necessários para o contêiner superior, incluindo cabeçalho, navegação e página inicial. Existem muitas mais configurações ricas que ainda não estudei, e vou aprofundar nisso durante o aprendizado subsequente.

style: estilo atual do componente, configurei suporte à sintaxe less. Mude style para <style lang="less"> para escrever less.

<template>
 <div>