vue 项目初建和常见问题

Posted 2022-10-16 yezichengy

拿猫眼为例:

步骤:

需要预装node.js

1. 查看node版本,控制台输入

    node -v

        v10.16.1

2. 查看vue版本

    vue -V  (Vue不是内部或外部命令...)--执行步骤3

3. 安装@vue/cli脚手架

    npm i -g @vue/cli

4. 创建新项目

    vue create maoyan

        1.Please pick a preset:

            Manually select features

        Check the features needed for your project:(上下键移动, 空格键选择, 选完之后按回车确定)

            Babel Router Vuex CSS Pre-processors

        

        Use history mode for router?

            y

        Pick a CSS pre-processor

            Sass/SCSS(width node-sass)

        Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

            In package.json

5. 进入项目目录下, 并启动服务

    cd maoyan       进入项目目录

    npm run serve   启动服务

6. 重置样式

    5-1. 输入命令安装reset.css: npm install reset.css --save

    5-2. 在main.js文件中引入使用: import ‘reset.css‘

7. 获取数据时, 需要先设置代理进行跨域

    7-1. 新建vue.config.js文件, 配置代理

        module.exports = 

            devServer:     //使用web服务器启动

                port: 8888, //指定端口号

                proxy:     //设置代理(解决跨域)

                    "/ajax": 

                        target: "http://m.maoyan.com",

                        changeOrigin: true

                    

                

            ,

        

    

    7-2. 使用axios进行数据获取(axios是对ajax进行封装的插件)

        7-2-1. 安装: npm i axios -S

        7-2-2. 在main.js文件中引入: import axios from ‘axios‘

        7-2-3. 在main.js文件中, 将axios声明到Vue的原型使用: Vue.prototype.$http = axios

        7-2-4. 获取数据: this.$http.get(url)

报错问题:

    1.These dependencies were not defined   下面这些依赖找不到

        可能出现的情况分为两种:

            a. 本地文件路径写错了

                @/components/comon/header.vue in ./node_module........

                解决: 对应报错, 排查路径问题(查看在哪些文件引入了header.vue文件, 路径在哪个文件中写错了)

                @/components/commons/header.vue

            b. 需要通过npm安装的依赖没有安装, 直接引用

                axios in ./src/main.js is not defined

                解决: 对应报错, 查看package.json文件, 看是否安装过此依赖

                    b-1. 如package.json存在该依赖, 则可能是由于网络原因, 丢包了

                        删除node_modules文件夹, 重新npm i 进行安装依赖

                    b-2. 如package.json不存在该依赖, 则重新安装

                        npm i axios -S

项目结构:

    maoyan

        --dist          打包后的文件夹

        --node_modules  所有依赖包管理

        --public    图标和index.html页面(为了写vue实例挂载的容器)

        --src       管理所有资源

            --assets        图标,图片,静态资源

            --components    写组件

            --style         存放css文件

            --views         写页面

            App.vue         应用的主组件(将首页内容渲染到挂载节点)--详情见main.js[通过渲染函数渲染App.vue, 挂载到#app]

            main.js         相当于webpack的入口文件, 在此管理所有的引入, 全局可使用

            router.js       配置路由（所有需要进行路由配置的组件， 需要通过import先引入进来）

            store.js        vuex状态管理器

        .gitignore      上传git仓库时配置需要被忽略的文件

        babel.config.js 将ES高版本转为ES5

        package.json    可自定义命令, 管理依赖包的版本号