vue基础17(vue-cli脚手架安装和webpack-simple模板项目生成)


vue-cli脚手架安装和webpack-simple模板项目生成

  ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

  GitHub地址是:https://github.com/vuejs/vue-cli

一、安装Nodejs

首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -vnpm -v,如果能显示出版本号,就说明安装成功。

二、安装vue-cli

  安装好node之后,我们就可以直接全局安装vue-cli:

npm安装方法
npm install -g vue-cli
 
国内淘宝镜像cnpm安装方法
 cnpm install -g vue-cli

  如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

  安装完成后,可以使用vue -V(大写的V)查看vue的版本。

 

如果接下来你不知道要干嘛,那么你可以在命令行中输入

vue -help

它会有以下提示:

懂点英语的意思应该能看到提示的信息,聪明的你此时接下来执行vue list看看有哪些可用的官网模板:

vue list

Vue.js官方提供了两种类型的模板项目:

  • 基于vue cli和browserify的项目模板
  • 基于vue cli和webpack的项目模板

vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式,简单模式仅包含基于vue.js开发必要的一些资源和包,使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。

我们在这里使用webpack的项目模板。没有为什么,因为webpack有点叼叼的。

我们今天玩一下webpac-simple 基于webpack的简单模板。

使用webpack-simple简易模板创建项目方法

1、首先切到需要创建项目的目录下

cd: 进入到指定的文件夹内
mkdir: 创建文件夹

2、使用vue指令初始一个webpack-simple模板的项目

vue init webpack-simple myproject  
(webpack-simple:选用的模板)    
(myproject:意思为生名一个项目目录名(可随意取名如果不写默认上层文件夹名作为项目目录名))

3、填写信息

详细截图


4、进入到项目目录下

cd 项目目录名     (cd myproject)

5、下载当前项目所依赖的包

npm install  (时间会比较久淡定等等)

6、启动项目

npm run dev   (建议修改默认浏览器为google)

接下来见证奇迹的时刻来了,我们第一个vue的项目。只要出现如下界面,证明项目启动成功了。

 

 webstrom启动vue框架项目方法

File----》New----》project----》Vue.js---》

git配置博客链接

https://www.cnblogs.com/L5251/articles/8952250.html

命令行运行以下命令

 

下载当前项目依赖的包

npm install


命令行启动程序
npm run dev   (建议修改默认浏览器为google)

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM