首先查看电脑是否已经安装vue并查看版本:

window+R快捷打开命令行,cmd,输入node -v回车

如果未安装操作步骤如下:

1:$ cnpm install vue(新电脑安装Vue,永久)
2:$ npm install --global vue-cli(安装vue-cli脚手架构建工具,永久)
3:$ vue init webpack my-project(初始化Vue,创建一个基于 webpack 模板的新项目)
4:回车,填写y/n (ESLint要选择n,其他全部y);
5:$ cnpm install(安装项目所需要的依赖,也许会自动安装,可省略)

6:(cd 文件夹名称)+本地运行项目npm run dev(查看readme里面步骤)
7:打包npm run build(项目完成发布时候才运行)

项目开始步骤:
1:src-compoents(组件文件夹)-创建页面.vue
2:assets放公共静态css/js/image/等资源
3:router:配置路由(唯一一个路由文件)

ctrl+alt+d注释
突出显示匹配标签标记,安装vincaslt
中文:安装language packs插件后,Ctrl+shift+p,输入language文件找到locale.json更改配置en>zh-cn

vue着手开始之大白话

1:首先打开app.vue.盛放最大的框架 <router-view/>一个跳转的路由,相当于这一块界面是可以替换的2:进入index.vue主页面,开始布局, <Header></Header>是固定的所以直接这样写。
<keep-alive>
<router-view></router-view>
</keep-alive>
这中间是变化的,所以这样写。
3:开始写局部里面的小版块了。可以看头部是静态不变的,所以用header标签写起来,点击不同的tab切换不同的页面(路由)
4:点击tab时候切换的页面有2种布局。
(1):只有一个整体的页面
(2):页面分为左右2个部分。这个时候发现左边是静态的,右边是动态的。所以在这个页面将动态的又封装起来,点击左边菜单切换路由。
其中以el标签的是引用模块化elementUI,引用他的样式和方法
一般就elementUI和IVew,引入进来,倒进来直接用

vue项目基本步骤的更多相关文章

  1. windows下vue项目启动步骤

    原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...

  2. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  3. vue-cli安装以及搭建vue项目详细步骤

    vue init webpack projectname(projectname是你项目的名称) 创建项目卡住不动解决方案: https://cli.vuejs.org/zh/guide/instal ...

  4. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  5. 如何搭建一个vue项目(完整步骤)

    参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...

  6. window10下启动vue项目具体步骤

    1. 安装nodejs 直接去nodejs官方网站下载安装包(https://nodejs.org/zh-cn/) 然后在cmd窗口里面输入 node -v 可以检测出来nodejs是否在全局环境下安 ...

  7. 搭建vue项目的步骤

    新建vue脚手架 vue-element-cms步骤: 1. vue create ……………(文件名)---这里取为vue-element-cms 2. 命令行工具进入这个文件夹,安装路由依赖包 n ...

  8. vue 项目搭建步骤

    环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的 ...

  9. vue项目初始化步骤

    项目初始化:() 1. 安装vue-cli :    npm install -g vue-cli 2.初始化项目:   vue init webpack  my-project 3.进入项目:  c ...

随机推荐

  1. 关于Java中反射的总结

    Java是面向对象的编程语言,万物皆对象,反射技术就是把类声明.类中的字段声明.方法声明.构造函数声明等都看成是对象,从而可以把类中的各个部分拆解出来单独处理,反射技术主要用来编写通用功能,平时编程使 ...

  2. Object.prototype.toString.call(obj).slice(8,-1)

    1.Object.prototype.toString() 该方法返回描述某个对象数据类型的字符串,如自定义的对象没有被覆盖,则会返回“[object type]”,其中,type则是实际的对象类型. ...

  3. 金山wps的面试经历

    故事从两个月前开始说起吧. 前段时间突然想跳槽,原因也没啥,就是想折腾下,看看外面的世界?有一部分原因是想离家近一些稳定下来,博主上份工作坐标厦门,风景好的简直随便拍照就是大片. 不废话了,机缘巧合, ...

  4. java面试题 - 框架

    1.servlet执行流程 客户端发出http请求,web服务器将请求转发到servlet容器,servlet容器解析url并根据web.xml找到相对应的servlet,并将request.resp ...

  5. Qt QString与string的转换

    QString --> string QString.toStdString();   string --> QString QString::fromStdString(string);

  6. SHELL用法一(基本概念)

    1. SHELL 编程概念入门 1)一个完整 Linux 操作系统(Linux 内核),默认用户是不能直接操作 Linux 内核,需要借助第三方的程序或者软件去操作,例如桌面工具.命令行工具(SHEL ...

  7. hadoop报错:could only be replicated to 0 nodes, instead of 1

    错误 [root@hadoop test]# hadoop jar hadoop.jarcom.hadoop.hdfs.CopyToHDFS 14/01/26 10:20:00 WARN hdfs.D ...

  8. IDEA 中tomcat上面有个x 而且找不到配置tomcat的选项

    在使用idea时候,准备启动服务器,tomcat突然上面有个xx 解决方式 在 File-settings-plugins 搜索tomcat 如果插件后面有 就重新取消之后再勾选,然后点应用就可以解决 ...

  9. 中心极限定理|z分布|t分布|卡方分布

    生物统计学 抽样分布:n个样本会得到n个统计量,将这n个统计量作为总体,该总体的分布即是抽样分布 根据辛钦大数定律,从一个非正态分布的总体中抽取的含量主n的样本,当n充分大时,样本平均数渐近服从正态分 ...

  10. 基于物理的渲染——间接光照

    在前面的文章中我们已经给出了基于物理的渲染方程: 并介绍了直接光照的实现.然而在自然界中,一个物体不会单独存在,光源会照射到其他的物体上,反射的光会有一部分反射到物体上.为了模拟这种环境光照的形式,我 ...