How to build a front-end project using vue2.x+webpack

This article introduces you to the detailed operation methods of quickly building a front-end project framework such as vue2.x, webpack, vuex, sass axios, elementUI, etc. Follow along and learn if you need.

1. This article will share how to quickly set up a front-end project framework based on webpack vue, use vue's own scaffolding tool vue-cli to build the basic environment configuration, and then introduce the corresponding dependencies through the npm package management tool To improve the various dependency frameworks of the project. The following is the specific operation.

2. Basic command operations.

1. Before development, you need to install node.js first. Search directly on Baidu or download it from its Chinese official website http://nodejs.cn/download/

After installing node The npm package management tool is also automatically installed. After installation, enter node -v or npm -v on the command line. If the version number appears, the installation is successful. As shown in the figure below:

2. Before using npm, it is best to change the image to Taobao. For long-term use, run the command: npm config set registry https:/ /registry.npm.taobao.org,

After the replacement is successful, run the npm config get registry command to display the Taobao mirror path, which means the replacement is successful.

3. The second step is to install vue-cli globally. In the command window, enter npm install -g vue-cli, and then run vue -V. The version number will appear to prove that the installation is successful.

4. Start generating the project, find a directory on the local hard disk to store the code, then open the command line cd to switch to the corresponding path, and then run vue init webpack Vue-Project (Project name)

vue init webpack Vue-Project（项目名称）

5. Enter cd Vue-Project and then install the dependency npm install. If you develop normally, run npm run dev (local development and running code). If you need to package, run npm run build.

6. The project monitors port 80 by default, which can easily cause port conflicts with other applications, so open the config folder under the project, open index.js, and change the port. to 8888, so as to avoid conflicts,

#7. Finally, re-run the command npm run dev, and then enter http://localhost:8888 in the address bar, and it will appear corresponding page.

3. Add the corresponding framework and dependencies

1. Introduce the sass pre-compilation tool to speed up coding and run the command npm install node-sass --save -dev, npm install sass-loader --save-dev. If node-sass is difficult to install, you can change it to cnpm to download the dependencies. The specific method can be found on Baidu.

Operation:

Create a new header directory in the components directory, create two new files header.vue header.scss, and then introduce them into app.vue for use, because vue talks about modules oriented development, so I like to put styles and components in a folder to distinguish them from other modules,

App.vue:

header.scss:

This proves that sass is installed successfully.

2. Introduce the axios interface request framework, run the command npm install axios --save-dev,npm install qs;

Then create a new http.js file in the src directory for interface request Related configuration,

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs';


var instance = axios.create({
 //baseURL: 'https://some-domain.com/api/',
 timeout: timeout,
 responseType: 'json', // default,
 //headers: {'apikey': 'foobar'},
 transformRequest:function(data,headers){
  //为了避免qs格式化时对内层对象的格式化先把内层的对象转为
  //由于使用的form-data传数据所以要格式化
  if (typeof data == 'string') {
  
   headers.post['Content-Type'] = "application/json; charset=utf-8";
  
  }
  else if(!(data instanceof FormData)){
  headers.post['Content-Type'] = "application/x-www-form-urlencoded";
  
   for(let key in data){
   if(data[key]===undefined){
    data[key]=null;
   }
   }
   data = Qs.stringify(data);
 }

  return data;
 }
});
export default instance; 

Vue.prototype.$http=instance;

can be used directly like this when using the request interface: (For specific usage, please see the official documentation)

this.$http.get(url).then((res)=>{
}）

3. Introduce elementUI, which seems to be easier to use. For the vue component UI, you don’t need to write many things yourself. It is recommended to use it. Run the command npm install element-ui --save,

and then introduce it into main.js using

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

. Of course, you can also Introduce as needed. Introduce whatever components you want to use. Do not introduce them all. This will reduce the size.

4. Introducing vuex

Vuex is a state management model developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use routing parameters to pass in vue

How to implement a drop-down menu in jQuery

How to use the swiper component in WeChat applet

How to use Vue.use() component through global method

The above is the detailed content of How to build a front-end project using vue2.x+webpack. For more information, please follow other related articles on the PHP Chinese website!