Vue2.0开发企业级移动端音乐Web App【慕课】

第2章 项目准备工作

包括项目需求分析、脚手架初始化代码、项目目录介绍及图标字体、公共样式等资源的准备 。

扩展【安装项目所需vue cli版本】：

好记性不如烂博客啊！学习Vue2.5.5的安装记录下

1.安装Nodejs https://nodejs.org

2.安装python2.7 http://www.python.org/ftp/python/2.7.3/python-2.7.3.msi

3. 安装webpack----------------------------------------------------------------

　　npm install -g webpack

3. 安装Vue-cli----------------------------------------------------------------

　　npm install -g vue-cli

4. 建立一个simpleVue模板项目--------------------------------------------------

　　vue init webpack my-project

5. cd my-project

6. 安装项目依赖库文件-------------------------------------------------------

　　npm install

7. 安装element UI 库--------------------------------------------------------

　　npm i element-ui -S

　　npm i axios -S

8. 引入elementUI ,axios库到项目,在main.js文件中添加--------------------------

　　import ElementUI from 'element-ui';
　　import 'element-ui/lib/theme-chalk/index.css';
　　import axios from "axios";

　　Vue.prototype.$axios = axios;
　　Vue.use(ElementUI);


8. npm run dev

---

2.2 Vue-cli脚手架安装

1. 安装vue cli

npm install -g vue-cli

2. 项目安装

输入：
vue init webpack vue-music

? Project name vue-music
? Project description A Vue.js project
? Author zhangzheng <2790836860@qq.com>
? Vue build standalone
? Install vue-router? Yes
? 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

3. 安装成功后

  cd vue-music
  npm run dev

2.3 项目目录介绍及图标字体丶公共样式等资源准备

1. 删除自动生成的src中的文件，

src文件目录		 描述

api			数据交互
common			公共的字体图片样式脚本文件 （font 放字体 、image 图片、js 插件、stylus 样式）
	stylus
    	base.styl  基础样式
        variable.styl 设计规范样式文件
components		组件文件
router			路由文件
store			vuex集中管理状态

扩展，gitHub中，空文件不会被提交，在空文件中添加一个.gitkeep文件，就可以提交空文件

2. 安装stylus依赖

  "stylus": "^0.54.5",
  "stylus-loader": "^2.1.1",

【执行 npm i】

3. 修改esList

4. 文件路径配置

// 当我们引入common下的文件时，我们平时可能这样写

import './common/stylus/index.styl'

//现在我们可以在webpack.base.conf.js，看resolve这个函数__dirname为当前目录build，…（往上找）到dir对应的目录。

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

// 在webpack.base.conf.js 配置

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api'),
    }
    },

//这样我们就可以直接这样写了

import 'common/stylus/index.styl'

效果图