VsCode的一些记录

一，使用npm

1，安装nodejs
2，在vscode中右击某个文件夹打开终端
3，在终端输入npm init 或者npm init -y生成npm的配置文件，类似于Maven的pom.xml文件。
4，使用npm导入某个依赖。例如jquery,只需在终端输入npm install jquery。
5，使用nodejs执行js文件，在终端输入 node 01.js （01.js为文件名）

二，创建vue项目

1，安装wabpack

在终端输入 npm install -g webpack webpack-cli

2,安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

3,安装插件

npm install -g @vue/cli @vue/cli-service-global
npm install -g @vue/cli-init

4，新建一个vue项目

vue create users
或者
vue init webpack users 

5，运行
进入项目文件夹下，执行以下命令

npm run serve

6，关闭项目

打开Terminal窗口按键盘【Ctrl】+【C】，提示是否关闭，键盘输入 【y】退出

7,使用asios，需要安装配置

 npm install axios --save-dev

在main.js中

import axios from 'axios'
Vue.prototype.$http=axios; //修改内部的http为axios

三，使用webpack打包（将多个js打包成一个文件）

//优点，减少请求。
1，安装
	在终端输入 `npm install -g webpack webpack-cli`
2，创建需要都打包的js文件
	
3，创建webpack的配置文件	webpack.config.js

const path =require('path')//nodejs的内置模块
module.exports = {
    entry: './src/main.js',//配置文件入口，其内引用了需要打包的文件
    output: {
        path: path.resolve(__dirname,'./dist'),//输出路径  __dirname当前文件路径
        filename: 'bundle.js' //输出文件
    }
}

4,使用命令打包 webpack 或 webpack --mode development
会生成到dist文件夹下，引入代码：

<script src="dist/bundle.js"></script>

四，打包css文件

1，安装style-loader 和css-loader

npm install --save-dev style-loader css-loader

2，配置文件中添加规则

const path =require('path')//nodejs的内置模块
module.exports = {
    entry: './src/main.js',//配置文件入口，其内引用了需要打包的文件
    output: {
        path: path.resolve(__dirname,'./dist'),//输出路径  __dirname当前文件路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,//打包规则应用到css
                use: ['styel-loader','css-loader']
            }
        ]
    }
}

3，使用命令 wabpack打包