一笑·科奉

使用vue-li工具创建Vue项目

作者: 一笑, 写于: 2017-09-09 02:08:29

一、安装node

http://nodejs.cn

一路下一步直到安装完成,打开cmd.exe输入如下命令,查看是否安装成功。

node -v

image.png        

二、安装vue-li

最好是全局安装:

npm install -g vue-cli

注:如果是Linux系统注意使用root权限执行,如:

sudo npm install -g vue-clie

如果安装比较慢,可以使用如下方法,将npm改为淘宝镜像的cnpm

npm install -g cnpm --registry='https://registry.npm.taobao.org'

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。

三、产生项目

1、进入到项目目录外执行(如,我的项目是d:\website\kefongui,则,当前目录应该是d:\website\):

vue init webpack kefongui

2、配置好后进入项目目录进行安装:

cd kefongui
npm install

其中:

Install vue-router? 输入Y(开发多页面应用必须安装)

image.png

Use ESLint to lint your code?输入N(因为选择Y,就会使用ESLint编写规则,造成一些莫名其妙的错误)

image.png

其他配置见下方:

image.png

安装完成后的目录接口(图片借用)

image.png

3、运行开发环境

npm run dev

image.png

四、编译项目(生产环境)

npm run build

打包以后,会在dist目录下,产生一个index.html和打包好的js/css静态文件,把这些文件放在正式服务器的站点根目录即可

image.png

分类: Vue.js, 浏览: 657, 评论: 1
原创文章转载请注明:转自《一笑·科奉》 原文地址:https://www.kefong.com/post/4.html