VSCode+Node.js+Vue模块化开发

安装VSCode及插件

Auto Close Tag

Auto Rename Tag

Chinese

ESlint

HTML Snippets

JavaScript(ES6)

Live Server

Open In browser

Vetur

node.js安装https://nodejs.org/en/

主要用npm包管理工具，下载前端相关依赖。

配置淘宝镜像

prefix --location=global

前端：组件化开发

模块化开发，

安装Vue客户端，注意空格！！！

npm install –g @vue/cli

全局安装webpack，注意空格！！！

npm install webpack -g

全局安装Vue脚手架，注意空格！！！

npm install –g @vue/cli-init

初始化vue项目

在桌面上创建一个文件夹

进入文件夹

vue init webpack vue-demo

展示流程

1．自己在components中写一个组件MyVue.vue三要素

<template>     <div>         <h1>你好！{{name}}</h1>     </div> </template>

<script>     export default {         data(){             return {                 name: "Vue"             };         }     } </script>

<style>   /*这里写样式*/ </style>

2．在main.js中导入组件

import MyVue from './components/MyVue'

3．定路由

入门 | Vue Router

<!--超链接-->     <router-link to="/my">Go to Vue</router-link>     <router-link to="/">Go to Home</router-link>

Element - The world's most popular Vue UI framework

整合ElementUI

Element - The world's most popular Vue UI framework

npm i element-ui -S

main.js

/*导入*/ import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

做一个布局