Vue - CLI 创建项目 + 项目文件分析
2018-02-02 本文已影响3人
廖马儿
CLI = command line interface
安装：
npm install -g vue-cli
创建项目(vuejs-playlist):
vue init webpack-simple vuejs-playlist
use sass的时候，我选择n。
进入项目目录
cd vuejs-playlist
npm安装依赖
npm install
运行本地开发服务器，为我们的项目提供服务
npm run dev
项目目录结构：
图片.png
分析文件：
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuejs-playlist</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
2.package.json
我们所有需要安装的package依赖。
{
"name": "vuejs-playlist",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "liaodalin19903 <liaodalin19903@126.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
3.assets文件夹
里面存放的是资源文件。
4.main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
这里就是根Vue实例，所有的入口。
