vue项目搭建

目录

• 补充
  • pip是什么
  • nmp
• Vue-CLI 项目搭建
  • 环境搭建
• 项目的建立
  • 建立项目
    • 选择默认配置会直接进行安装
    • 下面选择本身的配置
  • 启动/中止项目
  • 打包项目
  • 建立项目第二种方式
• 认识项目
  • vue项目目录结构分析
  • vue组件(.vue文件)
  • 全局脚本文件main.js（项目入口）
    • 改写
• 拿取别人的vue代码

补充

pip是什么

至关于终端的应用商城，能够找到你须要的资源而且进行下载

pip list 打印你下载的全部资源

pip unstaill ‘资源包’ 卸载资源包

nmp

npm 至关于pip

安装node产生npm

node是c++编写的，执行js

Vue-CLI 项目搭建

环境搭建

• 安装node

node下载网站

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

安装的时候只要修改一下安装路径就能够（也能够不修改），其余的能够不选

安装完成后

ctrl+c退出

• nmp都是从国外的网站进行下载资源的，速度比较慢
• 安装cnpm，换成国内的网站，让速度加快
• 这一步是更换镜像，让咱们下载的速度比较快，

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装脚手架
• 就像盖房子同样的脚手架，就是从这里演示过来的
• 和django不一样，安装以后直接就会安装好diango的脚手架
  • 安装完成后可在cmd中进行输入vue查看vue的环境

cnpm install -g @vue/cli

• 清空缓存处理
• 上面安装如何出现错误，终端安装失败时，能够清空 npm缓存 再重复执行失败的步骤

npm cache clean --force

或者

cnpm cache clean --force

项目的建立

建立项目

• 会在当前目录下进行建立，因此咱们要先进入本身想建立项目的路径

vue create 项目名
// 要提早进入目标目录(项目应该建立在哪一个目录下)
/ 选择自定义方式建立项目，选取Router, Vuex插件

选择默认配置会直接进行安装

下面选择本身的配置

通常状况下给出的选择给出的大写选择，大写选择是推荐选择

babel：在vue中采用es6语法，Babel框架就是把es6语言转换成es5语言执行的框架

typescript:用ts语言来写，咱们用原生的js

progressive：是一个前端的集合，技术集合，优化咱们的项目，就像su优化,

router：路由，把指定的链接请求分配到相应的界面

vuex：仓库，用来存储信息，全局的单列，在任何组件都额能拿到，能够进行组件之间的传参，通常不适用，存储的时候浏览器不饿能刷新，刷新会重置

css：预处理器

linter/formatter:格式,给配置文件，格式化代码

unit testing:测试脚本

E2E Testing：测试脚本

通常选择router/vuex

检查语法

ESLint与错误预防

只有ESLint + Airbnb配置默认配置

ESLint标准配置

ESLint +漂亮

采用某种已经有的配置，默认第一个

能够不选择语法检测，避免语法检测

配置文件的存储问题

在接下来的选项中

与git有关

最后一个选择是否保存本身的配置，而且下次下载的时候，会直接下载相同的配置

接下来下载项目依赖，完成项目的建立

启动/中止项目

// 要提早进入项目根目录
//启动项目
npm run serve
或者
cnmp run serve

//中止项目
ctrl+c

network是局域网络能够访问

打包项目

npm run build
// 要在项目根目录下进行打包操做

建立项目第二种方式

vue ui
1.启动一个socket，能够进行建立，实现可视化建立

认识项目

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等配置文件

配置文件：vue.config.js

module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选作

• main.js

new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})

• .vue文件

<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

vue组件(.vue文件)

# 1) template：有且只有一个根标签
# 2) script：必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性，表明该样式只在组件内部起做用(样式的组件化)

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>

全局脚本文件main.js（项目入口）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

改写

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

拿取别人的vue代码

1. 建立一个文件

2. 拉取别人的文件内的文件

   除了node_modules不拉取，其余均可以拉取，主要拉取下面文件夹

   public/src/package.json

3. 执行

   • 切换目录
   • cnpm install下载依赖包
   • 而后能够执行cnpm run serve