码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js之使用vue-cli初始化项目

时间:2018-04-12 12:30:42      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:

本文和大家分享的主要是vue.js中使用vue-cli初始化项目相关内容,一起来看看吧,希望对大家学习前端有所帮助。
一、安装步骤
step1、安装Node.js
首先需要下载并安装Node.js,下载地址:Node官网。
可查看我的另外一篇文章,仅作参考:Node.js入门及安装
测试安装是否成功,打开cmd,使用 node -v,如果显示版本号则表示安装成功。

step2、安装vue-cli
使用vue-cli(脚手架)搭建项目,vue-cliVue官方提供的用于搭建基于 vue+webpack+es6项目的脚手架工具。
GitHub地址: vue-cli
全局安装:-g 表示全局安装vue-cli
npm install -g vue-cli
如果安装较慢,可以使用淘宝镜像安装。
cnpm install -g vue-cli
step3、初始化项目
初始化基于webpack的模板项目,projectName为项目名称,可以自动生成目录及相关文件,跟express生成器差不多。
vue init webpack projectName
在初始化的过程中会询问一些相关的说明和配置,这些说明和配置会写入package.json文件中,会自动生成对应的模块。

如果需要使用ESLint规范和相关的unit test e2e,请输入yes,这样初始化出来的项目,会自动配置好对应的模块。
step4、 下载项目依赖模块
定位到项目根目录,下载项目依赖的所有模块。
npm install

step5、运行项目
定位到项目根目录下,使用命令:
npm run dev

使用命令运行项目,在浏览器中输入 http://localhost:8080 可访问。

整体过程:
全局安装 vue-clinpm install -g  vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack projectName
安装依赖,先定位到项目根目录,然后安装
cd  projectNamenpm install
#运行项目npm run dev
二、目录说明
项目文件需要放到 src 文件夹下,相关的部分静态资源需要放在static文件夹下。
项目开发完成之后,可以输入 npm run build 来进行打包工作
npm run build
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
项目上线时,只需要将 dist 文件夹放到服务器就行了。

来源:网络

Vue.js之使用vue-cli初始化项目

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
wjunxi
加入时间:2017-06-15
  关注此人  发短消息
文章分类
wjunxi”关注的人------(0
wjunxi”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!