4 vue脚手架

基于vue+vue-router单文件开发，可以完成小规模的页面的开发，但如果项目大+组件多+依赖多，开发起来就非常不方便。

此时，脚手架(vue-cli Vue Command Line Interface)是一个基于Vue.js进行快速开发的完整系统。

官方的说法:
Vue CLI致力于将Vue生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

通俗的说法:
他帮助我们构内置了很多组件来帮助我们更便捷的的开发vue. js项目。

1 安装

  • 第一步：安装node.js

    Vue-cli 4.x + 需要Node.js v8.9 或者高版本（推荐v10以上）

https://node.js.org/en/download/

  • 忽略！！！
windows系统下node、npm的安装和卸载：
https://note.youdao.com/ynoteshare/index.html?id=484f9e97e0fe6a21086a41e247725d63&type=note&_time=1653882989770

hosts文件配置，访问github.com：
https://www.jianshu.com/p/c7fc50bf616d
hosts文件路径：
C:\Windows\System32\drivers\etc

ipconfig/flushdns  刷新dns

nvm 安装：
https://blog.csdn.net/bidang3275/article/details/115357916

----------------------------------------------------------

正常的npm配置：https://www.cnblogs.com/lgx5/p/10732016.html
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm config set registry=http://registry.npm.taobao.org
增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules

image

ps: =如果想要更新node.js的版本=

1.先看本机node.js版本
	node -v
2.清除node.js的cache：
	sudo npm cache clean -f
3.安装n工具，这个工具是专门管理node.js版本的，
	sudo npm install -g n
4.安装最新版的node.js
	sudo n stable
5.再次查看本机的node.js版本
	node -v

  • 第二步：关于npm

    安装上node之后， 自带了npm包管理工具，类似于python中的pip

如果想要更新npm到最新版， 可以执行命令:
sudo npm install npmelatest -g

    image

  • 第三步：npm淘宝源，以后基于npm安装包就会快了(相当 于豆瓣的pip源)

    npm config set registry https://registry.npm.taobao.org

  • 第四步：全局安装vue-cli

    # 安装（最新版）
sudo npm install -g @vue/cli

# 安装（指定版本）
sudo npm install -g @vue/cli@4.5.14

# 卸载
sudo npm uninstall -g @vue/cli

  • 查看版本

      vue -version

windows安装的教程：（win7系统，只能使用v12版本）

安装v12.0.0版本：(https://nodejs.org/download/release/)

https://blog.csdn.net/zjh_746140129/article/details/80460965

ps：

Node.js教程：https://www.runoob.com/nodejs/nodejs-tutorial.html


2 创建项目

cd /xxx/xxx/
vue create mysite

image

babel ：用来将ES6的语法，转换成ES5的语法
eslint：用来做语法检查

按照提示执行如下命令，脚手架就会给我们大家一个Web服务去运行编写的vue项目

cd mysite
npm run serve

image

image


2 创建项目

cd /xxx/xxx/
vue create mysite

官网参考：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

在终端下输入
vue create 项目名

image

image

image

image

之后进入到项目名，并启动

  cd xxx
  npm run serve

  • 编译

    将你开发的代码，编译成js/css/html代码，后续拿到服务器上部署

    npm run build

  • 当你回家pull代码的时候，没有node_modules文件夹，在终端中输入：

    npm install

  • 终止运行

    ctrl + c

2-1 webstorm一站式创建项目

image

image


3 目录结构

1.babel.config.js
是一个将ES6语法转化成ES5语法的一个工具

2.package.json
项目所需的包的版本信息

3.package-lock.json
保存项目所需的包细节以及包的依赖等信息。

4.node-modules
项目安装依赖包的文件保存的地方。例如: npm install axios
axios包会保存在此目录、信息也会写在package. json、package-lock . json中

5.1 src/main.js
项目的启动npm run serve，用户访问时程序的入门。

5.2 src/App.vue  # 主组件
5.3 src/components  # 子组件
5.4 src/assets  # 
静态文件(自己的静态文件，会被压缩和合并)

6 public
[此目录下的文件直接被复制到dist/目录下，一般放不动的数据，引入第三方]
6.1 index.html  # 主HTML文件(模板引擎)
6.2 favicon.icon  # 图标

7 README.md  # 项目说明文档

注意：node_modules文件夹会在你提交Git的时候忽略。


4 快速上手

4-1 axios组件

安装：

cd 项目目录
npm install axios
npm install vue-axios

导入，在main.js中：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)  // 挂载到vue对象中

使用：

Vue.axios.get(api).then((response) => {
	console.log(response.data)
})

this.axios.get(api).then((response) => {
	console.log(response.data)
})

this.$http.get(api).then((response) => {
	console.log(response.data)
})

4-2 vue-router组件

安装：

cd 项目目录
npm install vue-router@3

引入：

// router/index.js

import { def } from '@vue/shared'
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'

Vue.use(VueRouter)


const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
    ]
})

export default router

// main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
// 导入router文件
import router from './router'

Vue.use(VueAxios, axios)

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

4-3 案例：路飞学城

将路飞学城（第1版）配置到vue脚手架中。

  • components文件夹

    Course.vue

    <template>
  <div class="course-list">
    <div class="item" v-for="item in courseList" :key="item.id">
      <img :src="item.cover" alt="" />
      <a>{{ item.name }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Course",
  data() {
    return {
      courseList: [],
    };
  },
  created: function () {
    this.axios({
      method: "get",
      url: "https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0",
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => {
      this.courseList = res.data.data.result;
    });
  },
};
</script>

<style>
</style>

    Hone.vue

    <template>
  <div>
      <h2>{{title}}</h2>
  </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            title: "欢迎使用路飞学城"
        }
    },
}
</script>

<style>

</style>

    News.vue

    <template>
  <ul>
    <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  name: 'News',
  data: function () {
    return {
      dataList: [],
    };
  },
  created: function () {
    this.axios({
      method: "get",
      url: "https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10",
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => {
      this.dataList = res.data.data.result;
    });
  },
};
</script>

<style>
</style>

  • router路由

    index.js

    // router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import Course from '../components/Course'
import News from '../components/News'

Vue.use(VueRouter)


const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/Course',
            name: 'Course',
            component: Course
        },
        {
            path: '/News',
            name: 'News',
            component: News
        },
    ]
})

export default router

  • 根目录

    App.vue

    <template>
  <div id="App">
    <div class="menu">
      <div class="container">
        <router-link to="/">路飞学城</router-link>
        <router-link to="/home">首页</router-link>
        <router-link to="/course">课程</router-link>
        <router-link to="/news">资讯</router-link>
      </div>
    </div>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  data() {
    return {
      title: "欢迎使用xx系统",
    };
  },
  methods: {
    clickMe() {},
  },
  components: {
    // HelloWorld
  },
};
</script>

<style>
body {
  margin: 0;
}

.container {
  width: 1100px;
  margin: 0 auto;
}

.menu {
  height: 48px;
  background-color: #499ef3;
  line-height: 48px;
}

.menu a {
  color: white;
  text-decoration: none;
  padding: 0 10px;
}

.course-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.course-list .item {
  width: 248px;
  padding: 10px;
  border: 1px solid #dddddd;
  margin-right: 5px;
  margin-top: 10px;
}

.course-list .item img {
  width: 100%;
  height: 120px;
}
</style>

    main.js

    import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
// 导入router文件
import router from './router'

Vue.use(VueAxios, axios)
// Vue.config.productionTip = true

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

5 线上部署

  • 第一步：编译

    npm run build

  • 第二步：将编译后的代码dist文件上传到服务器

    image

  • 第三步：安装nginx+配置+启动

    yum install nginx

    vim \etc\nginx\nginx.conf

    // 配置文件
server{
	root  /data/mysite;
}

    >>> systemctl start nginx

  • 第四步：访问

posted @ 2022-09-26 14:50  角角边  Views(40)  Comments(0)    收藏  举报