Welcome to kimi's blog

vue-cli创建项目

目录

vue-cli创建项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.

前端项目，使用工具(vue-cli)创建vue项目，单页面应用spa,组件化开发把xx.vue,ts,saas,less------编译后在浏览器中执行

vue-cli 创建项目开发--项目开发----编译(纯的html/js/css)---上线-->浏览器只能识别html/js/css

vue-cli工具，使用nodejs写，要运行需要安装node环境----需要下载node解释器

注意：可以在项目添加文件防篡改校验，先把文件生成md5值，以后被下载下来，再生成md5值做比对，结果不一致证明文件被篡改了

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

vue

vue2.x和vue3.x的区别？

vue2.x,使用使用vue-cli ：https://cli.vuejs.org/zh/

vue3.x使用vue-cli,vite只能创建vue3，效率非常高

安装vue-cli

安装之前要先安装nodej环境

  1. 可以使用下列任一命令安装这个新的包

    npm install -g @vue/cli  # 推荐
# OR
yarn global add @vue/cli  # 需要下载yarn

  2. 使用cnpm 代替npm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
# -g 表示装全局
# --registry=https://registry.npm.taobao.org 指定淘宝镜像

    使用cnpm优点：cnpm淘宝出的工具，下载是去淘宝镜像下载，速度快

  3. 统一使用cnpm代替npm

    cnpm install -g @vue/cli

    cmd控制台就可以输入 vue 命令（装了django可以使用django-admin创建django项目）
    -vue 创建vue项目

  4. 创建vue项目的几种方式

    1.cmd控制台就可以输入 vue 命令
2.装了django可以使用django-admin创建django项目

vue-cli创建项目

命令端创建vue-cli项目

  1. 命令创建项目

    vue create myfirstvue 
# 如果速度很慢---》ctrl+c停止---》执行npm cache clean --force 清理缓存

    下载慢的原因：从github拉一个空项目，会下载所有该项目所有的依赖---装到node

  2. 选择项

    image

    image

image

image

image

image

使用图形化界面创建项目

你也可以通过 vue ui 命令以图形化界面创建和管理项目

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

image

image

image

vue项目目录介绍

pychrm运行项目的两种方式

  1. 在命令行中执行---注意路径

    # 切入文件
   cd myfirstvue
 # 执行命令
   npm run serve

image

image

  1. pycharm---绿色箭头执行
    image

vue项目目录介绍

# vue 项目目录介绍
myfirstvue                   # 项目名
	node_modules             # 非常多第三方模块，以后把项目复制给别人时【上传git要忽略掉】，这个文件夹删掉，很多小文件，项目的依赖，项目要运行，没有它不行  如果没有只需要执行 cnpm install，根据package.json的依赖包，按装好依赖、
    
    public                   # 文件夹
    	 favicon.ico         # 网站小图标
         index.html          # spa 单页面应用，以后整个vue项目都是用这一个html，但你不用动他
        
    src                      # 文件夹--以后咱们都动这里面的
        assets              # 静态资源，以后前端用的图片，js，css。。都放在这里
    		logo.png        #  图片
        components          # 以后在这里放组件， xx.vue, 小组件
			HelloWorld.vue  # 提供的展示组件
        router              # 安装了Router，就会有这个文件夹，下面有个index.js
            index.js
        store               # 安装了Vuex，就会有这个文件夹，下面有个index.js
            index.js
        views               # 页面组件
            AboutView.vue
            HomeView.vue
        App.vue             # 根组件，new Vue实例管理了 div，以后原来写在div中的东西，现在都写在App.vue
        main.js             # 项目的启动入口

	gitignore                # git的忽略文件，后面学了git就会了
    babel.config.js          # bable配置文件，不用动
    jsconfig.json            # 配置文件，不用动
    package.json             #不用动，安装了第三方模块，它自动增加
    package-lock.json        # 锁定文件，忽略掉
    README.md                #  用户手册
    vue.config.js            # vue的配置文件

image

es6导入导出语法

xx.vue 组件

eg:APP.VUE
# 开发vue项目，固定模式
1 新建xx.vue
2 在xx.vue中就三块内容
	#1 以后组件的html内容，都写在这里
        <template>
        </template>
    
    #2 以后该组件使用的样式，都写在这
        <style>
        </style>
    
    # 3 以后js的东西，都写在这
        <script>
        </script>

main.js

# 找到index.html中的id为app的div，以后都在App.vue中写
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    
    # 导入导出语法

  1. 导入导出语法

    python创建包都是从其他的py文件导入；

    js 从es6 开始也支持包的导入和导出，分默认导出语法和命名导入导出语法。

    默认导入导出

    只能导出一个，一般导出一个对象

    # 导出语法
	export default {} 一般是个对象
# 导入语法
    import 别名  from '路径'  # 别名就是导出的对象

    命名导入导出语

    支持导出多个

    # 导出语法  可以导出多个
    export const name='kiki'
    export const add=(a,b)=>{
        console.log(name)
        return a + b
    }
     export const age =19
    
    
# 导入语法
     import{name,add} from './kiki/s1'
     console.log(name)
     console.log(add(33,44))
    
    
    
# 导入的简写形式
  前提是包下有index.js，才不用写index.js的路径，等同于python的__init__.py
    eg:包是kiki
          -index.js
        导入:
            import kiki from './kiki'

  2. vue项目的编写步骤

    1. 以后只需要写xx.vue   
    页面组件
    小组件--给页面组件用的
2.组件中导出
     export default {
          name: 'HelloWorld',
          data() {
            return {
              xx: '彭于晏'
            }
          },
	}
3. 在别的组件张要用，导入，注册
    # 导入
	import HelloWorld from '../components/HelloWorld.vue'
    # 注册
    export default {
      components: {
        HelloWorld 
      }
    }
    
4.注册以后，这个组件就可以使用导入的组件，写在<template>
  # 自定义属性
    <HelloWorld msg="传进来的p"/>

scoped

# 父组件的样式，在子组件中会生效，加入scoped让该样式只在当前组件中生效
<style scoped>
h1 {
  background-color: chartreuse;
}
</style>

登录功能--练习

  1. App.vue 动了

    <template>
  <div id="app">
    <router-view/>
  </div>
</template>

  2. 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')

  3. 访问根路径

    # 访问根 显示 HomeView.vue 这个页面组件
	-HomeView使用了Helloworld.vue
    -自定义属性
# 访问 /about 会显示AboutView.vue页面组件

  4. 使用axios

    1 安装 
	cnpm install axios -S    # 带着-S会自动把当前依赖加入到package.json中
2 导入（按照的第三方模块，直接导入）
	import axios from 'axios'
    
3 使用
	handleClick() {
      console.log(this.username, this.password)
      axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(res => {
        // console.log(res)
        alert(res.data.msg)
      })

    }

  5. 解决跨域

    1 装模块
	pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

2 注册app
	'corsheaders'
3 中间件修改
	'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'
)
posted @ 2023-02-21 08:27  魔女宅急便  阅读(73)  评论(0)    收藏  举报
Title