vue全家桶之(一)使用 vue-cli 创建模板项目
最近学习vue,学的我是头昏脑涨,作为一个前端萌新选手,前端大佬无疑是我现在的目标,那么脚踏实地,记录一点一滴,我觉得是我现在有必要做的,前几天公司做大屏,我被echarts搞的要眼瞎,但还好,都挺过来了,前几篇里介绍了echarts里面的圆环,个人觉得还是比较详细,还是有借鉴之处,都是自己走过的坑。 之前面试其他公司面试官问过我一个问题,react的运行环境怎么..
最近学习vue,学的我是头昏脑涨,作为一个前端萌新选手,前端大佬无疑是我现在的目标,那么脚踏实地,记录一点一滴,我觉得是我现在有必要做的,前几天公司做大屏,我被echarts搞的要眼瞎,但还好,都挺过来了,前几篇里介绍了echarts里面的圆环,个人觉得还是比较详细,还是有借鉴之处,都是自己走过的坑。
之前面试其他公司面试官问过我一个问题,react的运行环境怎么搭?
我:**,还有问这个的(后来才知道面试官是个后端小哥,前端的东西他也实在是不知道问啥。要么就问我ajax)
那么在这里,我觉得有必要记录记录vue怎么创建模板项目(vue-cli)
vue-cli是vue官方提供的一种脚手架工具
vue官网:https://cn.vuejs.org/v2/guide/installation.html(官网写的更详细,我萌新就不做过多介绍,来干货!)
创建vue项目
npm install -g vue-cli //全局安装cli(node就不用说了,自己装)
vue init webpack vue_demo //vue_demo为创建的项目名称,前面固定写法
cd vue_demo //进入到项目里
npm install //下载依赖
npm run dev //运行环境,npm start也可以
npm install -g vue-cli //全局安装cli(node就不用说了,自己装)
vue init webpack vue_demo //vue_demo为创建的项目名称,前面固定写法
cd vue_demo //进入到项目里
npm install //下载依赖
npm run dev //运行环境,npm start也可以
还有就是如果想下载路由之类的,直接下载,还有什么axios啊,vuex啊,下就完了,这些在以后的文章里都会慢慢介绍,把我的经验和一些亲自踩过的坑都记录下来。
npm install vue-router --save
--save参数的作用:在包配置文件 package.json 文件添加对应的配置
-save参数的作用:在包配置文件 package.json 文件添加对应的配置
模板项目结构(这只是最初搭建完的结构)
|-- build : webpack相关的配置文件夹(基本不需要修改)
|-- dev-server.js :通过 express 启动后台服务器
|-- config: webpack相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src :源码文件夹
|-- components: vue组件及其相关资源文件夹
|-- App.vue:应用根主组件
|-- main.js:应用入口 js
|-- static:静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
另外webstorm自带cmd(Terminal),就不用再shift+鼠标右键打开命令行了,webstorm中Alt+F12调出控制台直接npm run dev,然后访问访问: http://localhost:8080/ 非常好用!、
下期见,希望各位大佬批评指正。
更多推荐
所有评论(0)