vue1 vue-cli搭建

注:大家可以关注前端js动力节点公众号,这个兄弟写的很好,我经常看他的文章。

首先,我们将盘符切到d盘,打开命令行,输入:

npm install vue-cli -g

这个vue-cli呢,是vue的脚手架工具,可以自动生成目录,跟express生成器差不多。

安装完成后,我们就生成一下工程吧,输入:

vue init  webpack vue2

 

这时会出现一些提示,直接一路回车即可。

最后,如果出现如上的图示,就说明安装成功了。

我们看一下生成好的目录:

我们看到根目录下有个packge.json文件,打开瞧一瞧:

我们看到,需要安装的东西还真不少呢。得,慢慢装吧。我们输入命令:

cd  vue2

npm install

好,经过漫长的等待,我们终于将物料全部安装完毕。然后呢,我们输入命令:

npm run dev

我们看到,命令行进入阻塞等待状态。

根据提示我们知道,8080端口已经被监听了。打开浏览器,输入http://localhost:8080,会看到这样的页面:

好,下面我们讲一下目录结构。

build:存放最终发布的代码。

config:存放配置文件。

src:开发目录。这个比较重要哦~~

     |---assets:资源目录。

     |---components:存放组件,都是.vue文件。

     |---router:存放路由文件。

     |---App.vue:入口组件。

     |---main.js:项目核心文件,包括全局的一些配置。

static:静态资源目录。可以放一些图片,字体之类。

index.html:首页入口文件。

packge.json:安装列表。

其他的就不用管了。

原文地址:https://www.cnblogs.com/1rui/p/8257418.html