涉及内容

html  css   javascript   node.js   npm    webpack

2.9.6是常用版本

vue-cli4是基于webpack的

webpack是基于node.js的

npm:node package manager,是nodejs的包管理器,通常使用淘宝镜像;这是npmjs.org的一个镜像,由于在国内,网速相对国外快。该镜像每十分钟与官方同步一次。

下载nodejs并安装或者yum/apt-get安装

https://cdn.npm.taobao.org/dist/node/v14.4.0/node-v14.4.0-linux-x64.tar.xz

tar -xvf node-v14.4.0-linux-x64.tar.xz

sudo apt-get install nodejs

sudo apt-get install npm

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.5 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.19.0 (/usr/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
linux x64 5.4.0-39-generic
registry=https://r.npm.taobao.org

yarn是facebook公司用于替代npm的一个包管理器

sudo npm i yarn -g -verbose
sudo yarn config set registry https://registry.npm.taobao.org
$ yarn -v
1.22.4

安装vue-cli 3或4版本说明

本地安装会安装到当前目录

cnpm install @vue/cli

$ ls
node_modules

vue-cli 2版本的安装方式

npm install -g vue-cli

安装指定版本

2版本:cnpm install -g vue-cli@版本号

3及以上版本:cnpm install -g @vue/cli@版本号

正式安装

sudo cnpm install -g @vue/cli

安装vue-cli模块到/usr/local/lib/node_modules,并创建下面的链接(下面的链接是自动创建的,无须再重复创建),于是可以全局使用vue

[@vue/cli@4.4.6] link /usr/local/bin/vue@ -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

$ vue -V
@vue/cli 4.4.6

创建项目

Babel转码器,把EC6/7代码转换为浏览器可以识别的编码

至少需要安装Babel和Router

vue create vue2

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
❯◉ Router
◯ Vuex
◯ CSS Pre-processors
◯ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

上下键移动光标,空格键选择或取消,回车键下一步

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router

路由模式分为历史模式和hash模式两种,hash模式url中有#号,history没有但需要代码中配置,2版本3版本为hash模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

配置是放在package中还是指定的配置文件里,按默认走

? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files
  In package.json

以后的模块是否按当前的模式搭建

? Save this as a preset for future projects? (y/N) N

  Successfully created project vue2.
Get started with the following commands: $ cd vue2
$ yarn serve WARN Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.

启动

$ cd vue2
$ yarn serve
yarn run v1.22.4
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin DONE Compiled successfully in 2084ms 5:26:11 PM App running at:
- Local: http://localhost:8080/
- Network: http://192.168.43.157:8080/ Note that the development build is not optimized.
To create a production build, run yarn build.

2版本的启动方式,进入项目目录,npm run dev

项目文件:

$ ll
total 384
drwxrwxr-x 6 tanpengfei3 tanpengfei3 4096 6月 27 17:25 ./
drwxrwxr-x 4 tanpengfei3 tanpengfei3 4096 6月 27 17:24 ../
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 73 6月 27 17:25 babel.config.js
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 30 6月 27 17:25 .browserslistrc
drwxrwxr-x 7 tanpengfei3 tanpengfei3 4096 6月 27 17:25 .git/
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 230 6月 27 17:25 .gitignore
drwxrwxr-x 758 tanpengfei3 tanpengfei3 28672 6月 27 17:26 node_modules/
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 436 6月 27 17:25 package.json
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月 27 17:25 public/
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 263 6月 27 17:25 README.md
drwxrwxr-x 6 tanpengfei3 tanpengfei3 4096 6月 27 17:25 src/
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 321757 6月 27 17:25 yarn.lock

node_modules通常不提交git,其他的文件都可以提交

public 存放公共资源,比如图片

src 源代码

package.json 项目依赖的文件

yarn.lock 文件备份

README.md 说明文档

babel.config.js 之前安装的babel ES转码器配置

package.json文件

{
"name": "vue2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"vue-template-compiler": "^2.6.11"
}
}

serve 启动命令

build 编辑打包

依赖的vue版本是2.6,vue-router版本是3.2

$ ll src/
total 32
drwxrwxr-x 6 tanpengfei3 tanpengfei3 4096 6月 27 17:25 ./
drwxrwxr-x 6 tanpengfei3 tanpengfei3 4096 6月 27 17:25 ../
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 526 6月 27 17:25 App.vue
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月 27 17:25 assets/
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月 27 17:25 components/
-rw-rw-r-- 1 tanpengfei3 tanpengfei3 175 6月 27 17:25 main.js
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月 27 17:25 router/
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月 27 17:25 views/

main.js 是项目入口文件

App.vue 是一个组件,项目入口的组件,以大写字母开头,后缀.vue

router 路由

assets 静态资源,CSS / 字体  / 图片

views 展示的组件视图

components 组件,这里面放的是可以作为其他.vue后缀文件中组件使用的组件。模板中components放的是HelloWorld.vue,views/Home.vue中的使用

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template> <script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>

通过一个<HelloWorld/>标签来使用

vue项目本质上是一个Node.js项目,不同于其他的web项目根目录看到index.html,main.html之类的主页,这类项目的主页是main.js。

本质上他们都一样,都是html dom + js +css的组合文件,不同的是,之前的web项目更像是在html中引入了js和css,而node.js则是在js文件中引入了html dom,并通过js实现了一个轻量的事件驱动请求/响应服务器。这个服务器的存在,让node.js项目与之前的web+额外的服务器的方式有了很大的区别,这使得js的地位大增。实际上Js是一种语言,可以写各种软件,甚至是数据库,而html dom只是一种标识,无疑Js的功能要强大的多,以此为主导并无不妥。

main.js文件中引入了路由,初始化了Vue对象,引入了其他组件,成为了项目的入口。

vue-cli4脚手架搭建一的更多相关文章

  1. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  2. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  3. vue+webpack4 脚手架搭建

    1, vue 中 h => h(App) 的含义: //render: h => h(App) 是下面内容的缩写: render: function (createElement) { r ...

  4. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  5. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  6. 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

    一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...

  7. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  8. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  9. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  10. 脚手架搭建vue框架

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

随机推荐

  1. Intellij IDEA 配置Junit

    导包: 1.Hamcrest Core 包:    https://mvnrepository.com/artifact/org.hamcrest/hamcrest-core/1.3 2.Junit包 ...

  2. 第三周PTA笔记 回文数+A-B(大数减法)+高精度除法+数楼梯(大数加法)

    回文数 对于一个自然数n,若将n的各位数字反向排列所得的数n1与n相等,则称n为回文数,例如2332. 若给定一个N( 2<=N<=16)进制数M(M的长度在一百位以内),如果M不是回文数 ...

  3. 问题 N: 非洲小孩

    题目描述 家住非洲的小孩,都很黑.为什么呢? 第一,他们地处热带,太阳辐射严重. 第二,他们不经常洗澡.(常年缺水,怎么洗澡.) 现在,在一个非洲部落里,他们只有一个地方洗澡,并且,洗澡时间很短,瞬间 ...

  4. 菜鸡的Java笔记 第十九 - java 继承

    继承性的主要目的,继承的实现,继承的限制                继承是面向对象中的第二大主要特点,其核心的本质在于:可以将父类的功能一直沿用下去                为什么需要继承? ...

  5. 15-Transfer Learning

    介绍 迁移学习指的就是,假设你手上有一些跟你现在要进行的task没有直接相关的data,那你能不能用这些没有直接相关的data来帮助我们做一些什么事情.比如说:你现在做的是猫跟狗的classifer, ...

  6. Java JDBC 理论笔记

    一.JDBC常用接口.类介绍 JDBC提供对独立于数据库统一的API,用以执行SQL命令.API常用的类.接口如下: DriverManager 管理JDBC驱动的服务类,主要通过它获取Connect ...

  7. [atARC085F]NRE

    令$(S_{a},S_{b})$表示$a_{i}\in S_{a}$且$b_{i}\in S_{b}$的i个数,那么答案相当于$S(0,1)+S(1,0)=S(0,1)+S(\{0,1\},0)-S( ...

  8. [bzoj1264]基因匹配

    首先朴素dp的方程,即$f[i][j]=max(f[i][j-1],f[i-1][j],(a[i]==b[j])*(f[i-1][j-1]+1))$,这中间特殊的转移只在a[i]=b[j]时,而在这道 ...

  9. [源码解析] PyTorch 分布式(13) ----- DistributedDataParallel 之 反向传播

    [源码解析] PyTorch 分布式(13) ----- DistributedDataParallel 之 反向传播 目录 [源码解析] PyTorch 分布式(13) ----- Distribu ...

  10. Flink 是如何统一批流引擎的

    关注公众号:大数据技术派,回复"资料",领取1000G资料. 本文首发于我的个人博客:Flink 是如何统一批流引擎的 2015 年,Flink 的作者就写了 Apache Fli ...