草庐IT

Vue2.0 项目搭建的初始化

coderhzc 2023-10-08 原文

Vue使用 hash 后面是会跟 # 号的 一般情况下 会用 history 模式

实际截图:

image.png

一. 项目初始化

  1. 使用Vue Cli 创建项目
    如果还没有安装VueCli 可以写一下命令
    npm install --global @vue/cli

  2. 在命令中输入以下创建Vue项目
    vue create 项目名称

  3. vue CLI v4.2.3
    ? Please pick a preset
    default ( babel, eslint )

    Manually select features

default:默认勾选babel eslint ,回车之后直接安装进入装包
manually:自定义勾选特性配置,选择完毕之后,才会进入装包
选择第二种: 手动选择特性, 支持更多自定义选项

1.2 webpack的安装

全局安装 webpack 命令:

npm install -g webpack

安装特定版本 webpack(比如 3.x.x):

npm install -g webpack@3

看 webpack 是否安装成功(下面命令都可以):

webpack -v

webpack --version

  1. 全局安装yarn
    npm install -g yarn
    查看yarn 的版本是否安装成功: yarn --version

  2. cnpm 淘宝镜像安装(命令如下):
    npm install -g cnpm --registry=https://registry.npm.taobao.org

二. git版本初始化

  1. 进入gitHub界面 右上角有一个加号,点击 + 号选择第一个 创建一个新的git仓库

  2. 如果没有本地仓库的话:

    初始化本地仓库

    ( 1 ). git init

    把文件添加到暂存区

    ( 2 ). git add .

    把暂存区的文件提交到本地仓库形成历史记录

    ( 3 ). git commit -m " first commit "

    添加到远端仓库地址到本地仓库

    ( 4 ). git remote add origin 创建的地址

    推送到远程仓库

    ( 5 ). git push -u origin master

  3. 如果已有本地仓库,就直接操作下面的命令,代码就可以提交到GitHub上去了

VueCli 在创建的时候自动帮你初始化了Git 仓库 并且默认执行了一次提交

git remote add origin https://github.com/huzhenchu/toutaio-project.git

查看地址添加情况

git remote -v

添加错了远程仓库名称, 可以删掉

git remote remove 删除你错误的仓库名称

初次提交的时候, 要往提交的地方说明 origin: 提交的名称

简写方法:git push -u origin master
或者用完整写法: git push --set-upstream origin master

  1. 之后写的代码要提交的话,以下的操作:

    git add . 把当前目录下的所有文件添加到暂存区
    git commit -m "说明参数"

    推送到远程仓库

    git push 提交的地址

    如果推送的远程仓库或是分支改变了 如下做法:

    git push -u 远程仓库 分支名称

  2. 如果到公司克隆公司的远程仓库的代码:
    git clone "公司远程仓库地址"

ESlint 报错解析


ESlint.jpg

vue.config.js 的配置问题:

image.png

路由动态化的添加操作,解决重复使用import 问题

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 前端工程化
// 只要在vue中使用的是脚手架搭建的话就可以使用这个方法: 这个方法解决了import 的问题
// 这个有三个参数 第一个参数是文件的路径问题,
// 第二个是传一个布尔值 true / false(是否找到这个文件的子级), 
// 第三个参数:正则的匹配
// require.context('路径'):具体事例说明:
let routerList = []
function importAll(r) {
  console.log(r);
  console.log(r.keys()); // ["./goods/goods.router.js", "./login/login.router.js"]
  r.keys().forEach(item => {
    routerList.push(r(item).default)
  })
}
importAll(require.context('./', true, /\.router\.js/))
Vue.use(VueRouter)
const routes = [
  ...routerList,
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

具体代码按照截图严格实行( 命名的严格模式,比如login.router.js )

image.png

有关Vue2.0 项目搭建的初始化的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 未初始化的常量 Psych::Syck (NameError) - 2

    在我的gem中,我需要yaml并且在我的本地计算机上运行良好。但是在将我的gem推送到ruby​​gems.org之后,当我尝试使用我的gem时,我收到一条错误消息=>"uninitializedconstantPsych::Syck(NameError)"谁能帮我解决这个问题?附言RubyVersion=>ruby1.9.2,GemVersion=>1.6.2,Bundlerversion=>1.0.15 最佳答案 经过几个小时的研究,我发现=>“YAML使用未维护的Syck库,而Psych使用现代的LibYAML”因此,为了解决

  3. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  4. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  5. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议?谢谢,马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单,因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法,但您没有调

  6. ruby-on-rails - ActionController::RoutingError: 未初始化常量 Api::V1::ApiController - 2

    我有用于控制用户任务的Rails5API项目,我有以下错误,但并非总是针对相同的Controller和路由。ActionController::RoutingError:uninitializedconstantApi::V1::ApiController我向您描述了一些我的项目,以更详细地解释错误。应用结构路线scopemodule:'api'donamespace:v1do#=>Loginroutesscopemodule:'login'domatch'login',to:'sessions#login',as:'login',via::postend#=>Teamroutessc

  7. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  8. ruby - 这两个 Ruby 类初始化定义有什么区别? - 2

    我正在阅读一本关于Ruby的书,作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中,它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  10. ruby - 为什么当我调用类的实例方法时,初始化不显示为方法? - 2

    我正在写一篇关于在Ruby中几乎一切都是对象的博客文章,我试图通过以下示例来展示这一点:classCoolBeansattr_accessor:beansdefinitialize@bean=[]enddefcount_beans@beans.countendend所以从类中我们可以看出它有4个方法(当然,除非我错了):它可以在创建新实例时初始化一个默认的空bean数组它可以计算它有多少个bean它可以读取它有多少个bean(通过attr_accessor)它可以向空数组写入(或添加)更多bean(也通过attr_accessor)但是,当我询问类本身它有哪些实例方法时,我没有看到默认

随机推荐