VUE项目初建和常见问题总结

拿猫眼为例:

步骤:

需要预装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 可自定义命令, 管理依赖包的版本号

以上就是本次介绍的全部知识点内容，感谢大家对我们的支持。

赞 (0)

相关推荐

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • 在vue项目中使用sass语法问题

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能.SassScript是一个在Sass文件中使用的小型脚本语言. 使用sass可以使我们的样式代码变的更简洁,更具有易读性 首先,我们创建完vue项目之后 尝试在项目中使用sass语法

  • vue-cli 项目打包完成后运行文件路径报错问题

    本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家. 刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题. 百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案: 找到config文件夹下的index.js文件,修改路径代码 找到build对象,修改属性assetsPublicPath为 './' 但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js

  • vue项目中全局引入1个.scss文件的问题解决

    vue项目中全局引入1个.scss文件的问题解决

    首先先发一下我的项目路径 1. 首先要下载   sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改 scss: generateLoaders('sass') scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.reso

  • VUE项目初建和常见问题总结

    拿猫眼为例: 步骤: 需要预装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 pro

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • vue项目中常见问题及解决方案(推荐)

    webpack项目中自动引入全局scss变量文件 假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接hover颜色 $fontColor: #E6EFFF; //字体颜色-白色 webpack要识别scss,需要先安装sass的loader npm install --save-dev sass-lo

  • vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

    web端的微信支付可分为JSAPI与H5 JSAPI使用场景为微信内部,而H5支付则是使用在非微信下的外部浏览器. 1.JSAPI 在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge 废话不多说直接上代码: // 调用后端接口拿到JSAPI支付所需参数,我在beforeRouteEnter的时候调用. api.apply.jsApiPay(obj).then(res => { if (res.data.code === '0000') { vm.params = res.d

  • Vue项目开发常见问题和解决方案总结

    Vue Cli 打包之后静态资源路径不对的解决方法 cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } Vue cli

  • vue项目实战总结篇

    这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二. node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2. 用脚手架搭项目(只是一行命令) vue init webpack-simple (项目名字) 或 vue init w

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • 从零到一详聊创建Vue工程及遇到的常见问题

    准备工作 1.判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --registry="cnpm"全局安装淘宝cnpm. 2.开发工具选择很多,VUE无专用开发工具,开发项目多以SPA形式体现,本例使用 Visual Studio Code. 3.调试工具选择很多,官方推荐 vue-devtools . 安装方法:FQ或者github主页.https://github.com/vuejs/vue-devtools下载

随机推荐