vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行。

项目搭建完整步骤:

  1. 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装。

    1. 安装完毕检查nodeJs安装是否成功?

    2. nodeJs安装完成,自带npm,可以检查npm是否已经安装

  2. 安装webpack。
    1. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包。
    2. 安装webpack 

    3. 查看webpack是否安装成功?

  3. 安装 vue-cli 脚手架工具

    1. vue-cli是vue的脚手架工具,用于自动生成vue.js的模板工程
    2. 安装vue-cli 

    3. 查看vue-cli是否安装成功?

  4. 使用webpack+vue-cli 初始化项目

    1. 使用vue-cli+webpack构建项目

    2. 项目初始化之后的目录结构

    3. 至此,项目搭建完成。
时间: 2024-10-12 09:13:35

vue.js项目构建基础的相关文章

vue.js项目构建之vue-router2.0的使用

vue-router2.0官方文档地址:http://router.vuejs.org/zh-cn/index.html 单页应用? 单页应用程序(SPA,single page web application). SPA其实就是整个网站只有一个页面,只改变页面的显示内容,不需要改变整个网页. vue.js 的单页面应用是基于路由和组件的.路由用于设定访问路径,并将路径和组件映射起来.页面内容切换这里就是组件的切换. vue-router是vue.js官方的路由插件,适合构建单页面应用. vue

Vue.js项目的开发环境搭建与运行

写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装node.js(JavaScript运行环境runtime) 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以完成. 完成之后,开发命令行工具,输入 node -v 如果出现相应的版本号,则说明安装成功. 另外,npm是node.js下的包管理器,npm能很好的和诸如webp

如何把vue.js项目部署到服务器上

如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSourceMap: false 2-运行npm run build 然后在项目路径中找到打包后的文件,在项目文件的dist文件夹下面的static和index.html就是打包后的文件.然后我自己创建了cccBlog文件夹,把static和index.html拷贝到cccBlog下面,然后向服务器上传这个

如何创建vue.js项目和node.js项目?

一.搭建vue.js项目     1.先下载node.js  2.通过node.js的npm命令下载node.js的vue-cli(是一个基于 Vue.js 进行快速开发的完整系统) 1.使用阿里镜像下载vue-cli ( 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 再全局安装vue-cli npm install --global vue-cli ) 3.用vue-cli创建项目 1

Vue.js项目脚手架构建

vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备(node.js环境): 脚手架环境:vue-cli 执行如下命令安装: npm install vue-cli -g 或者cnpm install vue-cli -g 安装成功后在在命令行里输入vue,出现如图表示OK 二.项目初始化 vue init webpack project-name 例

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

Vue.js项目集成ElementUI

Vuejs实例-02Vue.js项目集成ElementUI Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 两者各有优缺点,不多评论,根据自己的需求,

vue.js项目搭建教程(参考)

第一步:安装node.js 1.传送门下载安装https://nodejs.org/en/ 2.打开cmd控制台分别查看node版本.path,npm node -v path npm -v 3.推荐淘宝镜像 npm config set registry https://registry.npm.taobao.org 4.安装全局vue-cli脚手架,并检查 cnpm install --global vue-cli vue -V 第二步:建立一个vue-test文件夹,并使用webpack模

win10系统本地iis服务器部署vue.js项目

1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安装OK了 , 自己在设置一下环境变量路径配置 自行百度.. 查看node版本命令:node -v 查看npm版本命令: npm -v 2.npm 的源都在国外的地址,安装起来特别慢,这里利用淘宝的镜像服务器. 安装命令为:npm install -g cnpm --registry=https://