Initialize a project structure using vue-CLI

  • Installation:npm i -g vue-cli
  • Scaffold generation project structure:Vue Init Webpack project name
/ static resources in the asset project index.css project global style /components in the components project/Router project routing file index.js All routing components app. vue project root component, There is only one route exit for the whole project, main.js, which is also the webPack entryCopy the code

Start a new feature

  • incomponentsDirectory to create components
  • inrouter/index.jsConfigure routes in

Use the Element-UI component library

  • Installation:npm i element-ui -S
  • Import from main.js:
    • Js file:import ElementUI from 'element-ui'
    • Style:import 'element-ui/lib/theme-chalk/index.css'
    • The UI plug-in:Vue.use(Element-UI)

Use precompiled CSS in components

  • Installation:npm i -D less less-loader

Extract the contents of a single file component

  • Note: if you put all the templates, scripts, and styles in a. Vue file, the file will become very bloated. You can pull different things out into separate files
<! Extract the template from the: template.html file in the current directory --><tempalte src="./template.html"></template><! Extract javascript from: sccript.js file in current directory --><script srcc="./script.js"></sccript><! Select 'style' from 'style.css' in current directory --><style src="./style.less" lang="less"></style>
Copy the code