Graphical introduction to vue.js from installation to construction process

This article mainly introduces the entire process of vuejs from installation to construction in detail, which has certain reference value. Interested friends can refer to it

In the beginning, vue was downloaded directly. The relevant files were operated according to the previous method

. Later I found that it seemed to be more convenient to use after installation, and then I started thinking about how to set up the framework. The following is the process:

Installation

1. Install nodejs

Just download it online

2.Install Taobao image

Open Command line input

npm install -g cnpm --registry= https://registry.npm.taobao.org

3. Install webpack

cnpm install webpack -g

4. Create a new folder in the path where you want to create a new project to store project files

cd into your File path

vue init webpack-simple project name (the name cannot be in Chinese)

There will be some default settings behind it

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5. After completion, you will find your The required files are already in the folder

6. Installing npm project dependencies will be a slow step because there are many files

npm install

7. Run your project

npm run dev

At this point your basic installation and setup is complete

I will write some below Before the introduction of some required files encountered in the project

1, jQuery

When discussing with others, he said that vue does not need to use jQuery, but our project said that it needs to be installed, so I installed it -_-
First is the command line installation

npm install jquery --save

Add - -save means to keep it locally
and then add it to webpack.config.js
module.exports.plugins =

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

Also add

import $ from 'jquery'
window.$=$

to the js you want to quote. In this way, jQuery will be successfully imported into the project

2, staticcss and js import

Static css import is to import in the corresponding .vue file
For example

@import './assets/css/global.css';

Static js is in the corresponding jsrequire Also these js and css should be placed under assets

require('./assets/js/global.js')

3. vue-resource Import
The import method of elementui is the same. Here is vue-resource as an example

npm install vue-resource --save

After that, import and use in the js that need to be imported

import VueResource from 'vue-resource'
Vue.use(VueResource)

The above is the detailed content of Graphical introduction to vue.js from installation to construction process. For more information, please follow other related articles on the PHP Chinese website!