前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo

一、软件及命令:

(1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可)。

(2)命令1:npm install cnpm -g

         命令2:cnpm install webpack -g

         命令3:cnpm install vue-cli -g

二、安装过程(熟练者可以直接跳过安装过程,直接使用上述命令安装即可) 

1、安装 node,首先去官网下载LTS(Long Term Support)长期支持版本,网址 https://nodejs.org/zh-cn/

   

扫描二维码关注公众号,回复: 11243379 查看本文章

      下载完成后直接点击下一步安装即可,安装完毕后使用 进入 Dos ,使用 node -v 查看安装是否成功,看到版本号就证明已经安装成功,如下图。

2、全局安装淘宝镜像 cnmp (国内服务器下载快)  -g (代表全局安装)

 执行命令 npm install cnpm -g,等待安装完毕,如下图

npm install cnpm -g

3、全局安装webpack (一种打包工具)

     执行命令  cnpm install webpack -g ,等待安装完毕,如下图

 cnpm install webpack -g

4、 全局安装 vue-cli (vue 项目开发的工具,脚手架,一种别人搭好的架子,我们直接在上面开发我们的项目,打包发布就行了)

    执行命令,cnpm install vue-cli -g,等待安装完毕,如下图

  cnpm install vue-cli -g

至此,vue+webpack 的开发环境已经安装完毕。

5、还是做一个 demo 吧,万一有初学者看到这个帖子,也算给别人一个指点吧。

     首先选择一个你要存放项目文件的目录,进入目录,在文件系统的地址栏输入cmd,点击回车。如下

(1)

 

(2)

 (3)

 

(4)执行如下命令,创建项目,项目名称为 vue-demo (自定义的,随你喜欢)

vue init webpack vue-demo,等待安装完毕(快慢取决于你的网速,一般1-2分钟可以完毕),过程中会输入一些配置,也是随你喜欢的。如下图

图1安装前的配置, 图2 安装完成

 

  至此脚手架工具已经把我们的项目初始化完毕,接下来我们来启动项目。

( 5)首先进入 项目目录,执行命令     cd vue-demo(你的项目名字)  如下图

(6)运行 cnpm install (这个命令是以后你创建任何的 vue-cli+webpack 项目首先要执行的)命令 安装项目依赖,如下图

 (7) 执行cnpm run dev 运行项目,运行成功的截图如下。

  

 (8) 浏览器 输入 http://localhost:8080  查看效果。此项目是 脚手架项目的示例,以后会持续更新 vue 项目开发的其他知识。

猜你喜欢

转载自www.cnblogs.com/spqin/p/12934593.html