首页 > 代码库 > webpack+vue搭建基础

webpack+vue搭建基础

使用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下就可以正常搭建成功了!

webpack+vue搭建基础