vue-cli 脚手架开发环境搭建


声明:本文转载自https://my.oschina.net/nameAfei/blog/1607272,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

ps:node和git的安装自己到官网查看

1.node环境的准备

2.安装淘宝镜像

打开命令行工具输入:npm install -g cnpm --registry=https://registry.npm.taobao.org

如果用git的命令行工具执行报错,就换用cmd命令行工具去执行

安装完成之后输入 cnpm-v,如下图,如果出现相应的版本号,则说明安装成功。

3.安装webpack

输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。

4.安装vue-cli

输入:npm install --g vue-cli,安装完成之后输入 vue -V(注意-V大写),如下图,如果出现相应的版本号,则说明安装成功。

5.用脚手架搭建项目

在命令行输入:vue init 模板名称  项目名称

(例如:vue init webpack-simple bxwManger)

ps:vue提供5个常用模板,可以根据自己的需求来进行下载

               simple  个人觉得一点用都没有(就是一个页面引入vue.js)
     webpack 可以使用(大型项目)
     Eslint 检查代码规范,
         单元测试
     webpack-simple 个人推荐使用, 没有代码检查 √

     browserify ->  自己看
     browserify-simple

成功之后进入项目文件夹安装依赖:

cd bxwManger
cnpm install

文件夹目录

运行项目:npm run dev,如下图,则说明安装成功。

6.项目打包

打包,因为不可能将这个项目就这样部署上去,需要将页面打包,打包命令为

npm run build

 

打包

打包完成后,会在根目录下生成一个dist文件夹,这就是最后的成品页面

有疑问参考链接:https://www.jianshu.com/p/2769efeaa10a有相应的解决办法

7.vue-devtools调试工具的安装

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

工具安装参考链接:https://segmentfault.com/a/1190000009682735

本文发表于2018年01月15日 16:35
(c)注:本文转载自https://my.oschina.net/nameAfei/blog/1607272,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 586 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

行业标准总是平庸的

一直到现在我才突然明白,我梦寐以求,是真爱和自由。

把爱情留给我身边最真心的姑娘,你陪我歌唱陪我流浪,陪我两败俱伤。

把青春献给身后那座辉煌的都市,为了这个美梦,我们付出着代价。

又是一年五一,祝我们工人阶级劳动节快乐! 今年被困在北京了,离境再入境需要隔离十五天。只能京津冀周边走一走了,想出去玩啊啊啊啊啊~

快捷链接
网站地图
提交友链
Copyright © 2016 - 2020 Cion.
All Rights Reserved.
ICP备案:鲁ICP备19012333号-4.

鲁公网安备 37061302000383号.