vue项目

环境搭建

node

node ~~ python:node是用c++编写用来运行js代码的

npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm

vue ~~ django:vue是用来搭建vue前端项目的

  1. 打开cmd输入vue,如果现实如下图一致,说明已经安装vue.若没安装会显示'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。

  2. 我们使用npm 安装和python解释的pip功能差不多相当于软件商店。npm是由node提供的。

  3. 官网下载nodenode官网Windows选择Windows安装,mac选择macos安装。

  4. 下载完成双击打开,next》勾选我同意》选择安装地址(可以默认,也可以自己选择)》next》直到完成。

  5. 重新打开cmd输入node,检查是否安装成功。

  6. ctrl+c按两次退出,然后输入npm可以进入应用商城,显示结果如下。

npm list 可以查看已安装项目。

  1. 因需要从国外下载资源所以比较慢,换源安装cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 安装vue项目脚手架

    cnpm install -g @vue/cli

    注:7或8终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤

    npm cache clean --force

项目创建

第一种:通过命令行创建

  1. 创建项目需要线选择项目目录(默认为当前目录),进入存放项目的目录,如 cd Desktop进入桌面(看自己情况而定,基本语法:cd 想要放的文件夹的地址)

  2. vue create proj-a: 创建一个项目名为proj-a的vue项目,创建成功后会让你选择y或者n(字母大写为推荐项),输入y

第二种:vue ui

  1. vue项目目录结构分析

├── v-proj
| ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件(项目的入口)
| | ├── router
| | | └── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
| | └── store
| | | └── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
| ├── README.md
└ └── package.json等配置文件
  1. 下载项目依赖

cmd输入

npm run serve

最新文章

  1. [LeetCode] Assign Cookies 分点心
  2. QQ上传大文件为什么这么快
  3. BZOJ2661: [BeiJing wc2012]连连看
  4. web前端开源小案例:立方体旋转
  5. http请求的组成部分
  6. NFC 与点对点应用
  7. 在 Visual C++ 中开发自定义的绘图控件
  8. VSTO 学习笔记(六)在 Excel 2010中使用RDLC报表
  9. SpringMVC 系列教程1-文件上传-配置
  10. Chrome 控制台 如何调试javascript
  11. linux 巨页使用测试
  12. AI_神经网络监督学习
  13. 其他综合-内网下Yum仓库搭建配置
  14. jmeter笔记(7)--参数化--用户定义的变量
  15. VueScroller 使用
  16. TensorFlow学习笔记之--[tf.clip_by_global_norm,tf.clip_by_value,tf.clip_by_norm等的区别]
  17. Oracle unusable index 与unvisible index
  18. Encountered IOException running import job: org.apache.hadoop.mapred.FileAlreadyExistsException: Output directory hdfs://slaver1:9000/user/hadoop/tb_user already exists
  19. 杜教BM【转载】
  20. hdu1542 Atlantis(矩阵面积的并)

热门文章

  1. socket模块其他用法
  2. 【Python】Python读取文件报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0x99 in position 20: illegal multibyte sequence
  3. 第四周总结&实验报告二
  4. 运维自动化之ansible的安装与使用 转
  5. 异步 map 和模块打包
  6. 手动搭建redis cluster
  7. 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_9 typeAliases标签和package标签
  8. RESR API (三)之Views
  9. Pager
  10. Scratch少儿编程系列:(四)脚本选项卡说明