web环境搭建总结

web环境搭建总结

1.node.js指令npm环境的搭建

首先下载node.js

https://nodejs.org

然后打开cmd命令行工具 输入

where node

再打开计算机高级设置找到环境变量

找到path 点击编辑 然后新建 将上面命令行的路径粘贴上去就好了

2.webpack环境配置

在已有node.js的环境下用npm指令完成webpack环境的搭建

首先在桌面新建一个文件夹然后在该文件夹的路径下打开cmd

首先基于文件夹初始化在cmd中输入下面代码

npm init

然后安装依赖输入下面命令

npm i -D webpack@4 webpack-dev-server@3

然后安装webpack脚手架

npm i -D webpack-cli@3 

然后用集成开发环境打开文件夹

在这里我们用的始webstrom

然后在项目中加入配置文件

在根目录下新建一个js文件 webpack.config.js

输入下面代码

const path = require("path")

module.exports = {
    //模式：开发
    mode: "development",
    //入口文件
    entry: './src/index.js',
    //打包到什么文件
    output: {
        filename: "bundle.js"
    },
    //配置webpack-dev-server
    devServer: {
        //静态文件根目录
        contentBase: path.join(__dirname, "www"),
        //不压缩
        compress: false,
        //端口号
        port: 8080,
        //虚拟打包路径，bundle.js没有真正生成
        publicPath: '/xuni/'
    }
}

最后要记得引入你的脚本

3.vue-cli环境搭建

因为下载速度较慢我们切换到淘宝镜像

打开cmd 输入下面命令

npm config set registry https://registry.npm.taobao.org

然后输入下面的命令下载脚手架

npm install -g @vue/cli

最后切换到你想新建脚手架的路径输入下面的命令

vue create 项目名

注意选择vue开发的版本