Chapter 2 Project preparation

Including project requirements analysis, scaffolding initialization code, project directory introduction, icon fonts, common styles and other resources prepared.

Vue CLI version required by the installation project:

A bad blog is better than a good memory! Learn the Vue2.5.5 installation record 1. Install Nodejs https://nodejs.org 2. Install python2.7 http://www.python.org/ftp/python/2.7.3/python-2.7.3.msi 3. Install webpack -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM install - webpack 3 g. Install the Vue cli -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM install Vue cli - 4 - g. Establish a template simpleVue project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the vue init webpack my - project 5. CD my - project 6. Installation project depends on library file -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM install 7. Install element UI library -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - NPM I element - NPM I axios UI - S - S 8. Introducing elementUI axios libraries to the project, in the main, js file -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the 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 devCopy the code

2.2 VUE-CLI scaffolding installation

1. Install the Vue CLI

npm install -g vue-cli

Copy the code

2. Project installation

Enter: vue init webpack vue-music? Project name vue-music ? Project description A Vue.js project ? Author zhangzheng <[email protected]> ? 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) npmCopy the code

3. After the installation is successful

  cd vue-music
  npm run dev
Copy the code

2.3 Introduction to the project directory and preparation of resources such as ICONS, fonts and public styles

1. Delete automatically generated SRC files.

SRC file Directory Description API Data interaction Common Common font Image style Script file (FONT for font, image image, JS plug-in, stylus style) Stylus base. Styl Basic style variable.styl Design Specifications Style file Components component file Router Routing file Store vuex Centralized management statusCopy the code

Empty files will not be submitted on gitHub. Add a. Gitkeep file to empty files

2. Install the Stylus dependency

"Stylus", "^ 0.54.5", "stylus - loader" : "^ 2.1.1",Copy the code

【 Execute NPM I 】

3. Modify esList

4. Configure the file path

/ / when we introduced under the common documents, we may write the import at ordinary times'. / common/stylus/index. Styl '/ / now, we can in webpack base. Conf., js, The resolve function __dirname is the build of the current directory... Go to the directory corresponding to dir. function resolve (dir) { return path.join(__dirname, '.. ', dir)} / / in webpack base. Conf., js configuration 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'Copy the code

rendering