VUE学习系列-02 使用脚手架构建项目并访问
- 其他随笔
- 时间：2017-11-26 00:58
- 5721人已阅读
🔔🔔🔔好消息!好消息!🔔🔔🔔
有需要的朋友👉:联系凯哥
在上一篇中，我们已经把VUE需要的环境已经搭建好了。接下来我们就要学习第一个vue程序。
本节主要内容：
1：使用脚手架搭建第一个vue项目
2：init项目时候遇到的坑
3：运行项目
一：使用脚手架搭建第一个vue项目
1.1：在命令行下切换到需要创建项目的目录。如凯哥的在：F:\VUEDEMO\demo
1.2：创建项目。比如项目名称为vuedemo1.那么使用命令：
vue init webpack vuedeo1
命令介绍：
初始化一个基于webpack 的项目。项目名称为：vuedemo1
二：init项目时候遇到的坑
2.1：在使用webpack初始化项目时候需注意：
提示要创建的项目名：
项目描述：
创建路由。输入y。
其他的都输入n
当出现如下：
当看到上图界面，恭喜你，你的项目基础已经构建好了。
那么，接下来就是根据提示创建项目、运行项目了。
三:下载依赖并启动项目
切换到刚创建的项目 vuedemo1目录下
根据2的提示。先要使用 npm install命令install 项目依赖的包 然后再使用npm run dev启动项目
注意：这有可能会卡住.可以回车键。
已经把需要的包下载下来了
在项目中，我们可以看到多出一个目录：
启动项目：使用命令 npm run dev
当出现：
就成功了。
在浏览器中访问localhost:8081
当看到这个界面说明已经OK了。
需要注意的：
1：在使用vue init webpack vuedeo1命令初始化项目的时候，记住只有路由的那个Y其他的都是N。否则会把代码严格校验带上。这样的后果就是，你必须严格按照要求写。多个空格、少个空格就会报错的。这个千万要记住。因为这个坑凯哥忙活了大半天才知道的。
下节预告：
我们知道学习一个新技术都是从官网上看最快。那么，真的是这样的吗？vue的hello Word真的那么容易写出出来吗？里面有多少坑？在下一篇文章中，凯哥将一一介绍。坑太多，一不小心就掉入。