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下就可以正常搭建成功了!
时间: 2024-08-29 15:48:21

webpack+vue搭建基础的相关文章

webpack 环境搭建基础框架

一.安装babel相关 1,安装依赖 cnpm i -D babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-plugin-transform-runtime 2,新建.babelrc { presets: [ [ "env", { "targets": { "browsers": ["last 5 versions", "ie &g

webpack简单搭建基础感悟

实现局部webpack搭建并打包. npm init 弄出一个package.json 首先npm i webpack webpack-cli -D 建立一个index.js,content.js.index.html index.html里面引入index.js, index.js里面的内容是 : import content from './content' console.log(content()) content.js里面的内容是: const fn = ()=>{ return 'o

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢?

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢? 项目你可以通过 easywebpack-cli 直接初始化即可完成或者clone egg-vue-webpack-boilerplate.下面说明一下从零如何搭建一个Egg + Webpack + Vue 的服务端渲染工程项目. 通过 egg-init 初始化 egg 项目 egg-init egg-vue-ssr // choose Simple egg app 安装 easywebpack-vue 和 egg

Vue搭建一个项目

用Vue搭建一个项目 Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js 支持所有兼容 ECMAScript 5 的浏览器. 安装环境: 第一步:安装  node>js 在这个网站下载适合自己电脑的安装包.然后跟着安装步骤一步一步安装.http://www.cnblogs.com/zzuIvy/p/nodejs_1.html 然后安装好之后需要检查下. 检查是否安装在窗口搜索  cmd 然后输入  node

Vue 搭建项目

Vue  搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.npm 安装cnpm: 命令: npm install -g cnpm --registry=https://registry.npm.taobao.org安装完之后就可以使用cnpm和npm命令一样,只是cnpm是淘宝镜像而已 三.npm 通过webpack方式安装vue: 命令: 1.npm insta

Vue框架基础

Vue框架基础 1.什么是vue框架 渐进式的JavaScript框架 渐进式:可以控制一个页面的标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前端项目 2.vue有什么优势 通俗来讲: 有指令(分支结构,循环结构...),复用页面结构等 有实例成员(过滤器,监听),可以对渲染的数据做二次格式化 有组件(模块的复用与组合),快速搭建页面 官方说法: 虚拟DOM,直接加载的到内存中,加载速度更快 数据的双向绑定 单页面应用 数据驱动 3.为什么要学vue 前端框架主要有三种:An

怎样通过已经使用过webpack+vue+vueRouter+vuecli的配置文件package.json创建一个项目

首先,我们自己得手动创建一个webpack+vue+vueRouter+vuecli工程,执行下面:如:新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo: $ vue init webpack vuedemo 安装完成后进入工程名称再根据原来项目的配置文件初始化 $ cd vuedemo $ npm install 但是由于在新建的时候对eslint的选择中选择了Yes,所以后面根据配置package.json的时候,发现没有eslint-friendl

Webpack系列:在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中?

在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部分情况下就够用了. 然后现在问题又来了,在生产环境下接口一般采用https协议,如果我们要把数据请求转发到生产服务器上怎么办? 首先会想是不是把上一篇博文中提到的proxyTable改成https就可以了,如下:     proxyTable: {                '/appserve

服务搭建基础篇     dhcp服务    

Server :  redhat 7.2     (192.1681.144) Clien :   redhat 6.8      (192.168.1.120) 未配置之前设置静态ip 网卡设置都为自定义vm1  (防止外部干扰) 服务器端下载dhcp安装包 确定server与client   通信 Client  网卡设置为dhcp 修改服务器端/etc/dhcp/dhcpd.conf 开启dhcpd服务 客户端client重启网卡获取到新的ip 绑定某一网卡.未特定主机私定ip 重启服务