一 Vue-cli簡介
Vue 提供了一個官方的 CLI，爲單頁面應用 (SPA) 快速搭建繁雜的腳手架。只需要幾分鐘的時間就可以運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。
二 安裝node.js
1 node官網
https://nodejs.org/zh-cn/download/
2 下載和安裝node.js
3 檢查安裝是否成功
C:\Users\cakin>node -v
v12.13.0
C:\Users\cakin>npm -v
6.12.0
三 使用vue-cli
1 全局安裝vue-cli
npm install --global vue-cli
2 創建一個基於 webpack 模板的新項目
F:\vue>vue init webpack todolist
? Project name todolist
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "todolist".
# Installing project dependencies ...
# ========================
3 進入F:\vue\todolist>目錄
4 在todolist目錄下執行下面命令
npm run dev
DONE Compiled successfully in 5350ms 17:35:10
I Your application is running here: http://localhost:8080
5 測試
四 項目生成結構
1 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>todolist</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2 項目入口文件main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
3 修改單文件組件app.vue
<template>
<div>
123
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
}
</script>
<style>
</style>
五 生成效果
