1安装node
去node官方下载
打开cmd输入node -v安装完成会出现版本号,输入npm -v出现版本号说明安装成功
2安装vue cli
在控制台输入npm install @vue/cli -g g是全局安装 如果你安装了yarn可以用yarn安装yarn global add @vue/cli
安装好输入vue --version 出现版本号说明安装成功
npm root-g 可以查看当前安装的路径
3创建vue项目
想在哪个文件夹下创建项目,直接在文件的目录下输入cmd就可以了
打开cmd输入vue create project project是项目名然后按回车
default 默认自动安装配置好的东西:babel处理js的eslink词法检测,想手动安装的选第二个manually按上下箭头可以选择
手动创建选第二个会出来这个页面
有✳的是默认选择这个也是按上下键控制,空格键选择和取消,选好按enter回车键
然后根据自己的需要来选择y还是n,
到这一步一般都是选择package.json把文件都放在里面
这样就是创建成功了,这时你还在你创建的路径下有一个 project文件夹这个就是创建的项目
如果你嫌麻烦直接选择defauli一键搞定
4vue项目
这个就是我们创建的页面
node_modules
安装好的各个模块
public
存放的是最后编译项目时候的页面模板 里面index.html要是你单页面开发一个就够了,里面的代码可以修改,比如你是移动端开发可以在里面配置rem,公共资源等等
src
src包含整个项目中所有需要包含的代码(脚手架生成的webpack配置项,只对src目录进行编译处理,其他目录是不处理的)
api 在开发项目时一般都是在src下创建一个文件夹api在里面对axios进行二次封装,组件化创建文件对应的页面在对应的文件下发请求,方便管理
assets src下的assets是放静态资源的
components页面级组件的一部分页面,公共组件
router src下的router是配置路由
store store是vuex仓库一般方便开发都会对vuex进行拆分
views 页面级组件
app.vue当前页面的主要入口
main.js 项目入口(单页面一个入口,多页面多个入口)
.gitignore
不想要的可以删掉
bobel.config.jsp
boobel的配置信息(编译解析js)
package.json
当前项目依赖清单(脚手架生成的项目中,我们还会把一些webpack需要用到的配置信息,也写在这里)
可执行脚本命令
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
dependencies里面的是生产依赖
readme.md
一些命令