01 快速构建基于webpack模板的Vue项目

推荐使用Node.js的包管理器 npm来构建项目,这是全球最大的开源库生态系统。下载安装后,在命令窗口通过以下命令可以检测node.js版本信息

node --version

同样也可以检测npm的版本信息,验证安装

npm -v

在开始创建Vue项目之前,请先安装webpack(前端资源加载/打包工具);
以及Vue的官方命令行工具Vue-cli,这将用于快速搭建大型单页应用,仅仅只需几分钟

npm install webpack -g
npm install vue-cli -g

接下来选择一个期望的目录来保存项目

cd 你的目标目录

见证奇迹的时刻到了,通过以下Vue-cli命令,创建一个基于webpack模板的Vue项目。

vue init webpack my-project

按照命令提示一步步完善项目信息,包括

? Project name  xxx    项目名称
? Project description  xxx    项目描述
? Author  xxx    项目作者
? Vue build standalone    构建方式
? Install vue-router? Yes  是否安装路由
? Use ESLint to lint your code? No    是否启用eslint检测规则
? Setup unit tests with Karma + Mocha? No    是否启用单元测试
? Setup e2e tests with Nightwatch? No    是否启用端到端测试

稍等片刻,项目构建成功,接下来命令窗口会提示您可以:

npm install    安装项目依赖
cd 你的目标目录    进到项目目录
npm run dev    启动项目

此时如果一切顺利,在浏览器打开http://localhost:8080,就可以看到以下页面了

运行中的Vue项目.png

恭喜!您的Vue项目已经在运行了。
而项目结构应该就是这样:
目录结构.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容