vue-cli(vue的脚手架搭建过程)

 vue-cli定义:是脚手架工具,作用就是用配置好的模板迅速搭建起一个项目,省去了自己配置webpack文件。

 搭建脚手架步骤:

  一、环境搭建

    1)在官网下载安装node.js ,安装装完,输入node -v,出现版本号就说明安装成功

    

    2)npm -v 查询 npm 版本号是否在3以上

    

    3)安装淘宝镜像。安装完输入 cnpm -v,检查是否安装成功,之所以安装它,是为了安装速度,原本npm的服务器是外国的,速度会很慢。

    

    4)安装 webpack, npm install webpack -g 输入 webpack -v 检查是否安装成功

    

  二、安装vue-cli工具

    安装vue-cli 脚手架构建工具,npm install vue-cli -g,输入vue -V检查是否安装成功(注意是vue -V是大写)

    

  三、环境和工具准备好了,接着就是vue-cli初始化项目,生成项目模板

    安装vue脚手架,vue init webpack name(name不能是中文),输入命令后,会跳出几个选项让你回答,直接都回车就可以,回答完毕就开始构建项目了。

  四、进入到项目目录,安装模块包

    cd name(进入创建的工程目录) , npm install (安装项目依赖),安装所有的模块。

    如果是安装具体的哪个个模块,在install 后面输入模块的名字即可。而只输入 install就会按照项目的根目录下的package.json文件中依赖的模块安装。安装完成后,目录中会多出来一个node_modules文件夹,这里放的就是所有依赖的模块。

    

  五、启动项目 npm run dev,访问http://localhost:8080 就能进入页面

    

  六、介绍追踪首页页面的显示过程

    1)index.html 

    

    2)package.json

    

    3)build目录

    

    4)main.js

    

  七、打包项目 npm run build

  

    

原文地址:https://www.cnblogs.com/willowTree/p/12183446.html

时间: 2024-10-10 15:42:37

vue-cli(vue的脚手架搭建过程)的相关文章

vue/cli 3.0 脚手架【进阶】

安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 lib-flexible  

vue.js学习vue-cli脚手架搭建

1.环境搭建. 前提必须安装node.js,安装方式百度搜索.Node.js方便npm的使用.最好安装最新版本的node.js.npm是随同NodeJS一起安装的包管理工具 在你的项目环境下即你项目所在的文件夹下,打开命令行 打开方式:按住shift键,右键单击就出现了, 1)使用vue-cli脚手架工具构建 安装vue-cli:npm install -g vue-cli 2).使用vue-cli初始化项目: 创建一个基于 webpack 模板的新项目 vue init webpack my-

webpack+vue+iview使用vue-cli脚手架搭建

1.安装nodejs环境 下载node.js.安装成功后再控制台输入 node -v 出现版本号则,安装成功. 如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经出现版本号,此步骤可以忽略.将安装node的路径剪切,右键我的电脑-->属性-->高级系统环境设置-->环境变量-->找到path环境变量.加上复制的node的安装路径. 2.可以在控制台在输入一下命令,查看是否已经成功的安装了npm   npm -v  如果出现版本号说明已经安装成功

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非

个人脚手架搭建 -- charmingsong-cli 看看对不

目的 为了解决多次构建相同功能的项目,在一定程度上需要定制化以及私有化设置 设计 问题 为什么不用现成的脚手架生成? 如果利用vue或者react的脚手架搭建项目可能创建完项目后还需要一系列的配置以及更改展示样式,并没有真正的解决问题.并且各自的脚手架只能生成各自的框架结构,其他项目不支持.例如,用vue-cli生成一个react项目,是不可以的. 为什么不直接复制相同的项目? 现有的项目中逻辑代码关联性很强,并且项目中可能存在一些基于项目环境的代码,直接复制项目更改名称工程量较大.环境错误不易

用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project,终端定位到该项目下 4,初始化项目 vue init webpack-simple 会让你进行该项目的一些基本设置,如下图 5,安装项目依赖 npm install 6,启动项目 npm run dev 可以看到终端提示成功 在浏览器上打开localhost:8080/#/可以看到如下图所示,说明

web前端 -- vue -- vue cli脚手架

搭建 vue-cli 脚手架 1. 依赖的环境是:node.js 1.1.检测node和npm版本 node.js 官网下载页,选择 windows 系统 msi 安装版本,一路 next 安装. 要有6.9以上的node:node-v 要有3.10以上的npm:npm -v 附:安装node.js 1.2. 安装全局 vue cli Linux下使用命令:sudo npm install --global vue-cli windows下:npm install --global vue-cl

在vue cli 3脚手架里引入tinymce 5富文本编辑器

本文主要讲的是在Vue cli 3脚手架搭建的项目里如何引用Tinymce 5富文本编辑器. 请注意识别"版本号",不同版本的配置细节有所不同. 1. tinymce的安装 1. 安装tinymce-vue npm install @tinymce/tinymce-vue -S 2. 安装tinymce npm install tinymce -S 3. 下载中文语言包 tinymce提供的语言包很多,选择下载中文语言包 2. 使用方法 1. 文件操作 在项目根目录的public目录下