With vsCode architecture VUE CLI, and configuration JQUERY

First install their own NODE.JS and VUE and NPM.

1, the installation VUE CLI:

In vsCode terminal, execute the following code:

npm install -g vue-cli

Figure:

 

 VUE create a project, execute the following code:

vue init <template-name>  <project-name>

among them:  

<Template-name> template name, we generally use the template webPack

Project Name <project-name> created after the implementation will be completed in the current folder create folder under this name, for example, here I use "test project" 

vue init webPack test project

Figure:

Creation process, he will be asked to create a number of conditions, such as:

? Project name: Enter the name of the project to determine y

? Project description (A Vue.js project) input Item Description

? Author Author

? Vue build (Use arrow keys) Vue compile the way, here are two options you can use the up and down arrows options, we generally choose the first:

> Runtime + Compiler: recommended for most users  (一般选择这一项，按回车)
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required

? Install vue-router? (Y / n) is installed VUE route. If your project contains routing, select Y.

? Use ESLint to lint your code? (Y / n) whether ESLint regulate your code. General election N.

? Set up unit tests (Y/n)  是否设置单元测试，一般选N

? Setup e2e tests with Nightwatch? (Y/n) 是否设置e2e测试，一般选N

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  这里我们选npm方式创建。

> Yes, use NPM  （选这个）
Yes, use Yarn
No, I will handle that myself

如图：

 

 

 

 

 

 

 

 

好了，现在我们就创建好了VUE-CLI项目。

 

2、集成JQUERY插件

很多前端都非常喜欢JQUER库，所以这里我介绍一下如何引入该插件。

安装JQUERY,执行以下命令：

npm  install  jquery   -save

如图：

安装完成之后，我们还要修改一下相关配置文件：

打开“项目测试 =》 build =》webpack.base.confi.js “ 内，加上如下两段代码：

const webpack = require('webpacK')

plugins: [    　
    　　new webpack.ProvidePlugin({
    　　　　jQuery: "jquery",
    　　　　$: "jquery"
    　　})
    ]

对应的位置，见下图：

在"项目测试=》src=》main.js" 内导入jquery插件，代码如下：

import $ from 'jquery'

如图：

至此，我们就可以使用JQUERY的所有语法了。