webpack+vue搭建基础

Posted 2020-09-19 文艺范儿m

使用webpack工具打包vue+es6项目现在是前端很火的一个技术。今天大体介绍下自己在搭建过程中的问题：

步骤：在cmd命令行下操作

1.安装nodejs ， 路径：www.nodejs.org,一路默认安装即可，目前最新的nodejs包已经涵盖了npm，所以不用另行安装npm；

2.安装cnpm，为了加快安装速度，我们可安装淘宝镜像服务器，对我们所依赖的modules进行安装；
npm install -g cnpm --registry=https://registry.npm.taobao.org

3.接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架；

cnpm install -g vue-cli

安装完成后输入vue回车，确认是否安装成功；

4.找到合适的位置创建自己的项目文件夹

例如在f盘下创建：

f:           //进入f盘

mkdir myvue //创建项目文件夹

cd myvue  //进入文件夹

 

vue init webpack my-vue //自定义文件夹安装webpack

5.cd进入文件夹，通过命令

cnpm install   //安装依赖

6.cnpm run dev,运行项目，在浏览器窗口打开localhost：8080即进入了你的项目.

注意事项：本人在搭建过程中在win10系统下，按照以上步骤一次性成功，在win7环境下，测试好多次都安装失败，

这时需要打开 nodejs自带的Node.js command prompt命令行，

1. npm install -g vue-cli
2. vue init webpack my-project
3. npm install
4. npm run dev
5. （注意这四个步骤省略了文件夹的切换语句），这样在win7下就可以正常搭建成功了！