（1）初始化項目

1 使用vue-cli初始化項目

vue init webpack my-renren

得到以下輸出：

? Project name my-renren
? Project description A Vue.js project
? Author neumeng <404879269@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No? 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) npmvue-cli · Generated "my-renren".# Installing project dependencies ...
# ========================npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.> uglifyjs-webpack-plugin@0.4.6 postinstall E:\VisualStudioCodeProjects\my-renren\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 1126 packages from 646 contributors in 318.991s# Project initialization finished!
# ========================To get started:cd my-renrennpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

得到的目錄結構如下表：

Name	Description
build	項目構建(webpack)相關代碼
config	配置目錄，包括端口號等。我們初學可以使用默認的。
node_modules	npm 加載的項目依賴模塊
src	這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。
static	靜態資源目錄，如圖片、字體等
.babelrc	babel配置文件
.editorconfig	編輯器配置文件
.gitignore	git忽略配置文件
.postcssrc.js	postcss配置文件
index.html	首頁入口文件
package-lock.json	記錄當前狀態下實際安裝的各個npm package的具體來源和版本號
package.json	項目配置文件
README.md	項目的說明文檔，markdown 格式

其中，src目錄里面包含了幾個目錄及文件：

• assets:放置一些圖片，如logo等。
• components:目錄里面放了一個組件文件，可以不用。
• App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。
• main.js: 項目的核心文件。