Vue项目搭建

Vue-CLI 项目搭建

环境搭建

  • 安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
  • 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装脚手架
cnpm install -g @vue/cli
  • 清空缓存处理
npm cache clean --force

项目的创建

  • 创建项目
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目,选取Router, Vuex插件
  • 启动/停止项目
npm run serve / ctrl+c
// 要提前进入项目根目录
  • 打包项目
npm run build
// 要在项目根目录下进行打包操作

认识项目

  • 项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
  • 配置文件: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>
posted @   極9527  阅读(105)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示